Capstone Project #3: Health Tracker (BMI Calculator)

Project Details

You are asked to implement a Body Mass Index (BMI) Calculator using HTML, CSS and JavaScript. The calculator accepts user input for height and weight, performs real-time BMI calculation, and provides health feedback based on the result (e.g., Underweight, Normal, Overweight, Obese).

Consider the following requirements:
  • Users should be able to approve that their age is 18 or above to use the calculator, with displaying a warning message if they are below the permitted age.
  • Users should be able to select whether to use metric (cms and kgs) or imperial units (inches and lbs).
  • Users should be able to enter their height and weight.
  • Users should be able to view their BMI result, with a color-coded weight classification (underweight: purple, normal: green, overweight:yellow, obese: red)
  • Users should be able to view the optimal layout for the interface depending on their device's screen size.
  • [BONUS] Users should be able to save their previous calculations on page refresh.

You are free to use the tools of your choice, but here's some recommended tools to consider:

  • IDE : VS Code
  • Extensions for VS Code: Live Server
  • Browser : Google Chrome, Mozilla Firefox