Design a BMI Calculator using JavaScript
A BMI (Body Mass Index) Calculator measures body fat based on weight and height, providing a numerical value to categorize individuals as underweight, normal weight, overweight, or obese. It’s widely used to assess health risks and guide lifestyle or medical decisions.
A BMI Calculator using JavaScript allows users to input their weight and height, then calculates and displays their Body Mass Index (BMI), helping assess whether they are underweight, normal weight, or overweight.
Formula:
BMI = (weight) / (height * height)
// height in cms and weight in kgsExample:
- Weight: 70 kg
- Height: 170 cm
Height in meters = 170 cm / 100 = 1.7 m
BMI = 70 / (1.7 * 1.7)
BMI = 70 / 2.89
BMI ≈ 24.22Output Preview:
Image Preview
Approach
BMI is a number calculated from an individual’s weight and height.
- Collect height and weight from the user, stored in `height` and `weight` variables.
- Compute BMI by dividing weight (kg) by the square of height (m²).
- Use if-else statements to interpret the BMI result and determine the category.
- Check for empty inputs; if any are missing, display messages to provide height or weight.
- Use HTML for structure, CSS for styling, and JavaScript for input processing and output display.
In the JavaScript section, we are processing the taken input and after calculating, the respective output is printed.
Example: In this example, we will structure in the index.html file and implement the logic in the app.js file
<!-- index.html file -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BMI Calculator</title>
</head>
<body style="background-color: rgb(244, 255, 244)">
<div class="container">
<h1>BMI Calculator</h1>
<!-- Option for providing height
and weight to the user-->
<p>Height (in cm)</p>
<input type="text" id="height" />
<p>Weight (in kg)</p>
<input type="text" id="weight" />
<button id="btn">Calculate</button>
<div id="result"></div>
</div>
</body>
</html>
window.onload = () => {
let button = document.querySelector("#btn");
// Function for calculating BMI
button.addEventListener("click", calculateBMI);
};
function calculateBMI() {
/* Getting input from user into height variable.
Input is string so typecasting is necessary. */
let height = parseInt(document
.querySelector("#height").value);
/* Getting input from user into weight variable.
Input is string so typecasting is necessary.*/
let weight = parseInt(document
.querySelector("#weight").value);
let result = document.querySelector("#result");
// Checking the user providing a proper
// value or not
if (height === "" || isNaN(height))
result.innerHTML = "Provide a valid Height!";
else if (weight === "" || isNaN(weight))
result.innerHTML = "Provide a valid Weight!";
// If both input is valid, calculate the bmi
else {
// Fixing upto 2 decimal places
let bmi = (weight / ((height * height)
/ 10000)).toFixed(2);
// Dividing as per the bmi conditions
if (bmi < 18.6) result.innerHTML =
`Under Weight : <span>${bmi}</span>`;
else if (bmi >= 18.6 && bmi < 24.9)
result.innerHTML =
`Normal : <span>${bmi}</span>`;
else result.innerHTML =
`Over Weight : <span>${bmi}</span>`;
}
}
Output: Click here to see live code output
