INTRODUCTION :
BMI stands for Body Mass Index. Body mass index is a value derived from the mass(weight) and height of a person. The Formula for BMI is given as follow:
BMI = weight/(height)^2
HTML code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="calculator-container">
<h1>BMI CALCULATOR</h1>
<p>Height in meters:</p>
<input class="height-input-field" type="text">
<p>Weight in kilograms:</p>
<input class="weight-input-field" type="text"><br>
<button class="calculate">Calculate</button>
</div>
<h3 class="result"></h3>
<p class="result-statement"></p>
<script src="script.js"></script>
</body>
</html>
The above code is the HTML code that we use to create BMI calculator. We save the code as index.html. After running the code It would show as in the image below.
Here we give the values of height in meters and weight in kilograms as input and click on Calculate button to perform the calculation operation to give the result. The results show whether the given values fall under underweight, overweight or have good weight.
JavaScript code :
var heightInput = document.querySelector(".height-input-field");
var weightInput = document.querySelector(".weight-input-field");
var calculateButton = document.querySelector(".calculate");
var result = document.querySelector(".result");
var statement = document.querySelector(".result-statement");
Var BMI, height, weight;
calculateButton.addEventListener("click", () => {
height = heightInput.value; weight = weightInput.value;
BMI = weight / (height ** 2);
if(BMI < 18.5) {
statement.innerText = "Your BMI falls within the underweight range";
} else if((BMI > 18.5) && (BMI <=24.9)) {
statement.innerText = "Your BMI falls within the normal or healthy weight range";
} else if((BMI >= 25) && (BMI <=29.9)) {
statement.innerText = "Your BMI falls within the overweight range";
} else{
statement.innerText = "Your BMI falls with in the obese range";
}
});
The above JavaScript code is used to take the input values given in the html and perform the calculation. After performing the calculation it gives the result along with the statement concluding whether the given input falls under underweight, overweight or have a good weight.
Given below is an example of BMI calculator :
In the example ‘2’ is given as input to height in meters and ’80’ is given as input to weight in kilograms. On clicking Calculate button the following results are shown..
