In this test, using HTML, CSS AND JS, we are creating an assessment tool for an infectious disease.

PLEASE ONLY USE HTML, CSS AND JS. THANK YOU.

Background In this test, we are creating an assessment tool for an infectious disease. The tool will give a risk level based on the following factors: Age Gender Pre-existing medical conditions: o Diabetes o Cardiovascular disease o Cancer Requirements (60%) Create a web page using HTML and CSS (5%) Set the page title as "Disease Risk Assessment" o (5%) Using external CSS file o (59) Set the background color of the whole page as: "lightgray" o (15%) Create a centered container . Taking 70% width of the whole page Background color is "white" 20px padding in all directions In the container: . (20%) Create a form with the following elements: (2%) A name text input (required) (2%) An age number input (required) (4%) A gender drop-down (required) with following options: o Please select o Female o Male (6%) A group of checkboxes with following options: o Diabetes o Cardiovascular disease o Cancer The group should be labelled as "Pre-existing medical conditions" (6%) An "Assess" button with following styles: o 10px padding o 100px width o Background color is "dodgerblue" o Button text color is "white" . loa AAAcAremant Uictors tablo uod to direlavall the innut racord (8%) An "Assessment History" table used to display all the input records, with following columns: Name Age Gender Diabetes Cardiovascular Disease Cancer Risk Level . (2%) The table cells should have 10px padding (40%) Implement the following features using JavaScript: Fill out the form and click the "Assess" button: . (5%) Perform standard HTML validation to make sure all "required fields are filled. The invalid inputs should be prompted. . If the form input is valid: (15%) Calculate risk level based on following rules O Everyone has 5% probability to get infected O Person with age > 20 and 50 has 15% more probability to get infected O Male has 5% more probability to get infected o Person with any pre-existing medical conditions, each condition gets 10% more probability to get infected o The risk level will be: . Low - 10% and 40% For examples, refer to Risk Level Calculation Examples . (5%) Output (display) the record in the assessment history table (5%) The table row background color should be set based on risk level o Low - "lightgreen" o Medium - "lightyellow" o High - "tomato" (5%) The input form should be cleared out after clicking "Assess" button (5%) The assessment history table should not be cleared out after clicking "Assess" button Risk Level Calculation Examples Base Age Gender Diabetes Cancer Total Risk Cardiovascular disease 10% Low P1 P2 5% 5% 19 22 (+10%) Male (+5%) Female Yes (+10%) 35% Medium Yes (+10%) P3 5% Yes Yes (+10%) 45% High (+15%) Male (+5%) (+10%) Example The final implementation should be similar like this: Disease Risk Assessment Tool Name Gende Pre- Dishes Assessment History N A Gender a Cardiolar De Car Richard Jan 19 meslehet Kult 22 ft falut Tommal e m Background In this test, we are creating an assessment tool for an infectious disease. The tool will give a risk level based on the following factors: Age Gender Pre-existing medical conditions: o Diabetes o Cardiovascular disease o Cancer Requirements (60%) Create a web page using HTML and CSS (5%) Set the page title as "Disease Risk Assessment" o (5%) Using external CSS file o (59) Set the background color of the whole page as: "lightgray" o (15%) Create a centered container . Taking 70% width of the whole page Background color is "white" 20px padding in all directions In the container: . (20%) Create a form with the following elements: (2%) A name text input (required) (2%) An age number input (required) (4%) A gender drop-down (required) with following options: o Please select o Female o Male (6%) A group of checkboxes with following options: o Diabetes o Cardiovascular disease o Cancer The group should be labelled as "Pre-existing medical conditions" (6%) An "Assess" button with following styles: o 10px padding o 100px width o Background color is "dodgerblue" o Button text color is "white" . loa AAAcAremant Uictors tablo uod to direlavall the innut racord (8%) An "Assessment History" table used to display all the input records, with following columns: Name Age Gender Diabetes Cardiovascular Disease Cancer Risk Level . (2%) The table cells should have 10px padding (40%) Implement the following features using JavaScript: Fill out the form and click the "Assess" button: . (5%) Perform standard HTML validation to make sure all "required fields are filled. The invalid inputs should be prompted. . If the form input is valid: (15%) Calculate risk level based on following rules O Everyone has 5% probability to get infected O Person with age > 20 and 50 has 15% more probability to get infected O Male has 5% more probability to get infected o Person with any pre-existing medical conditions, each condition gets 10% more probability to get infected o The risk level will be: . Low - 10% and 40% For examples, refer to Risk Level Calculation Examples . (5%) Output (display) the record in the assessment history table (5%) The table row background color should be set based on risk level o Low - "lightgreen" o Medium - "lightyellow" o High - "tomato" (5%) The input form should be cleared out after clicking "Assess" button (5%) The assessment history table should not be cleared out after clicking "Assess" button Risk Level Calculation Examples Base Age Gender Diabetes Cancer Total Risk Cardiovascular disease 10% Low P1 P2 5% 5% 19 22 (+10%) Male (+5%) Female Yes (+10%) 35% Medium Yes (+10%) P3 5% Yes Yes (+10%) 45% High (+15%) Male (+5%) (+10%) Example The final implementation should be similar like this: Disease Risk Assessment Tool Name Gende Pre- Dishes Assessment History N A Gender a Cardiolar De Car Richard Jan 19 meslehet Kult 22 ft falut Tommal e m