Design a BMI calculator using JavaScript
BMI calculator
BMI stands for Body Mass Indicator. It is a numeric value which is calculated based on the height and weight of a person. It represents the fatness of the body by a numeric value. The formula of BMI is: BMI = kg/m2
Let’s suppose for a person if weight is W (in kg) and his height is H (in meter) then his BMI will be:
BMI= (W) / (H*H)
For creating the BMI calculator, we will use HTML, CSS, and JavaScript. We will ask the user to enter his weight in the centimeter and also we will ask the user to enter his weight in kilograms. If any input is empty then we will not calculate the BMI and there will be a warning stating that empty fields are not allowed.
After entering the values, the user will click the button and his BMI will be displayed on the screen and based on the values of the BMI we can display the message if it is under fat or overfat using simple if else conditions.
HTML code-
<!DOCTYPE html>
<html>
<head>
// we are adding the JavaScript file into html code
<script src="script.js"></script>
<style>
body{
font-family: verdana;
font-weight:800;
}
input{
text-decoration:none;
outline :none;
border-bottom: 2px solid grey;
}
</style>
</head>
<body>
<div class="main_div">
<h1> Welcome to JavatPoints BMI Calculator</h1>
<h2>Enter the Height (in cm)</h2>
<input type="text" id="height">
<h2>Enter the Weight (in kg)</h2>
<input type="text" id="weight">
<button id="btn">Calculate Your BMI </button>
// here div section is empty as BMI will be placed here dynamic
<div id="result"></div>
</div>
</body>
</html>
JavaScript Code-
window.onload = () => {
let bmiButton = document.querySelector("#btn");
bmiButton .addEventListener("click", getBMI);
};
function getBMI() {
let H = parseInt(document
.querySelector("#height").value);
let W= parseInt(document
.querySelector("#weight").value);
let ans= document.querySelector("#result");
if (H=== "" || isNaN(H))
ans.innerHTML = "Provide a valid Height!";
else if (W=== "" || isNaN(W))
ans.innerHTML = "Provide a valid Weight!";
else {
// Fixing upto 2 decimal places
let bmi = (W / ((H * H)/ 10000)).toFixed(2);
if (bmi < 18.6) ans.innerHTML =
`You are Underweight : <span>${bmi}</span>`;
else if (bmi >= 18.6 && bmi < 24.9)
ans.innerHTML =
`You are Normal : <span>${bmi}</span>`;
else ans.innerHTML =
` You are Overweight : <span>${bmi}</span>`;
}
}
Code Explanation-
We have here two files: the first one id idnex.js and the second one script.js. Although we can use the third file of CSS but currently we are ignoring that CSS because we are more focused on the functionality of this calculator instead of styling.
In the index.js file first, we have included the script.js file so that all the functionality which is written in the JavaScript file is merged to particular elements of HTML.
Now in the body section of the HTML file, we have two input boxes of type text where the user will enter its height and weight. Then, we have a button and we have given a unique id to this button.
We have another div section which will be empty initially and when we calculate the BMI then it will be updated according to that value.
Now, let’s talk about the JavaScript file where we have implemented all the functionality of our calculator.
As the window is loaded on the screen, we will add the event listener with the click of the button and attach a function to calculate the BMI. Now let's see the function’s description.
Initially, we will take the value from the input box and store it in the variables. The value of height will be stored in the variable ‘H’ and the value of weight will be stored in the variable ‘W’.
Now if H is null then in the result div we will print the text to enter a valid height. Now if W is empty then we will print the text in the div result to enter the valid weight.
If users enter both values correctly then we will calculate the BMI using the formula and we will have if else conditions.
- If the BMI value is lesser than 18.6, we will print as underweight.
- If the value is greater than 18.6 but less than 24.9, we will just print the text as normal weight.
- Else BMI value represents the overweight so; we will print the corresponding text.
Output:
