Create a simple and clean BMI (Body Mass Index) Calculator interface where users can input their height and weight and instantly see their calculated BMI and category (e.g., Underweight, Normal, Overweight).
The focus is on designing a beginner-friendly, responsive UI with a lightweight calculation.
This is suitable for an easy-level task because it combines basic layout + small logic + clean visual design.
🧩 Requirements
Provide input fields for:
-Height (cm or feet/inches)
-Weight (kg)
-A button to calculate BMI.
A display area showing:
-The BMI value
-The BMI classification (Underweight/Normal/Overweight/Obese)
-Simple, readable layout with clean UI.
-Basic JavaScript allowed for calculating BMI.
📋 Tasks / Checklist
-Create a page with a title/header.
-Add inputs for height and weight.
-Add a “Calculate BMI” button.
-Implement basic BMI formula:
BMI = weight (kg) / (height in m)²
-Display BMI result clearly in the UI.
-Display BMI category based on value range.
-Style the interface with modern spacing + simple colors.
-Ensure input fields have proper labels and focus states.
-Test with sample inputs to ensure correct calculation.
🎯 Acceptance Criteria
-Users can enter height and weight easily.
-BMI is calculated correctly and displayed clearly.
-BMI category (Underweight/Normal/Overweight/Obese) is shown.
-UI is clean, readable, and beginner-friendly.
-Inputs and button have hover/focus states.
-No layout breaking or visual clutter.
Mockup:
Create a simple and clean BMI (Body Mass Index) Calculator interface where users can input their height and weight and instantly see their calculated BMI and category (e.g., Underweight, Normal, Overweight).
The focus is on designing a beginner-friendly, responsive UI with a lightweight calculation.
This is suitable for an easy-level task because it combines basic layout + small logic + clean visual design.
🧩 Requirements
Provide input fields for:
-Height (cm or feet/inches)
-Weight (kg)
-A button to calculate BMI.
A display area showing:
-The BMI value
-The BMI classification (Underweight/Normal/Overweight/Obese)
-Simple, readable layout with clean UI.
-Basic JavaScript allowed for calculating BMI.
📋 Tasks / Checklist
-Create a page with a title/header.
-Add inputs for height and weight.
-Add a “Calculate BMI” button.
-Implement basic BMI formula:
BMI = weight (kg) / (height in m)²
-Display BMI result clearly in the UI.
-Display BMI category based on value range.
-Style the interface with modern spacing + simple colors.
-Ensure input fields have proper labels and focus states.
-Test with sample inputs to ensure correct calculation.
🎯 Acceptance Criteria
-Users can enter height and weight easily.
-BMI is calculated correctly and displayed clearly.
-BMI category (Underweight/Normal/Overweight/Obese) is shown.
-UI is clean, readable, and beginner-friendly.
-Inputs and button have hover/focus states.
-No layout breaking or visual clutter.
Mockup: