In this challenge I had to build out this body mass index calculator page and get it looking as close to the design as possible. My aim was to do it pixel perfect.
On this page users should be able to:
- Select whether they want to use metric or imperial units
- Enter their height and weight
- See their BMI result, with their weight classification and healthy weight range
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
Expected behaviour: Based on the person's BMI results, add their weight classification onto sentence "Your BMI suggests you’re:"
- Underweight: BMI less than 18.5
- Healthy weight: BMI 18.5 to 24.9
- Overweight: BMI 25 to 29.9
- Obese: BMI 30 or greater within the results component.
The individual's healthy weight range based on the lower and upper BMI categorisations and the person's height.
- for the first time I had to css a background gradient
- I had to figure out how the filter property works so I can use drop-shadow effect