ICT Practical Examination

Context

You are working as a Junior Web Developer tasked with perfecting a simple web-based health status checker system. This system is used to calculate the Body Mass Index (BMI) and determine a person's weight status category. The system must be able to:

1. accept input for Weight (kg) and Height (cm).
2. retrieve relevant identity data (Name and Activity Level) from a master data array based on the selected ID.
3. calculate the BMI value and determine the Weight Status based on the result of the calculation.

Task

Start by analyzing the basic structure of the psas-1.html file to identify the variables, loops, and HTML IDs that will be modified in the Task.

1. Understand the structure of clientData array and how the for/foreach loop works, which is used to search for client data.
2. Create a JavaScript object array named clientData that contains the clients’ master data by adding data for 5 new clients from the following table to the clientData array:

id	clientName	Activity
C005	Rina Kartika	High Intensity
C008	Ahmad Wijaya	Low Intensity
C019	Ragil Firman	High Intensity
C034	Supriadi	Moderate Intensity
C050	Dhiatama Nisa	Low Intensity

3. Ensure all HTML IDs for displaying results and input have been correctly identified.
4. Display clients data in a dropdown list by looping (foreach) on the clientData array.
5. Modify the JavaScript function calculateBMI() to perform the following steps:
1. Get the input values for Weight (kg) and Height (cm).
2. Search for the client data using a for loop and the selected client ID. from master data
3. Calculate the BMI using the formula:

BMI = Weight (kg) / (Height (m))2

6. Determine the Weight Status (Health Status) using an if...else if...else structure based on the following BMI criteria:

BMI Score	Weight Status	colorClass
≥ 30.0	OBESE	bg-red-100 text-red-700
25.0 ≤ BMI < 30.0	OVERWEIGHT	bg-yellow-100 text-yellow-700
18.5 ≤ BMI < 25.0	NORMAL WEIGHT	bg-green-100 text-green-700
< 30.0	UNDERWEIGHT	bg-blue-100 text-blue-700

7. Modify the outBMI, outStatus, and other information (Client’s Name, Client’s Activity, height in cm, weight) elements based on the example output so that:
1. it displays the Weight Status text (e.g., "Obese", ) calculated in step 6.
2. it applies the appropriate styling class (e.g., bg-green-100 text-green-700) to the outStatus element based on the resulting BMI Status.

Challenge Plus Point

Add input validation at the beginning of the checkGrade() function.

1. if the input (Client ID, Weight, and Height) is invalid (empty or outside the 0-300 range).
2. Then display an error message ('Error! Client’s data is not valid.') using alert().

Submission

1. Save your file as [PSAS_FullName_Class].html. (eg. PSAS_Putera Islamiyadi_X1.html)
2. Ensure the code is well-structured and easy to read.