How to build a simple BMI calculator using html and javascript

This tutorial is going to cover how you can build your very own BMI calculator using simple html and javascript.

What is a BMI calculator?

BMI stands for Body Mass Index. A BMI calculator is just a simple calculator that can be used to measure the ratio of a person's weight to the square of a person's height. The aim of the BMI calculator is to find out if a person is overweight, underweight or have a good weight.

The formula for BMI is given as follows:

BMI = weight/ height²

where the weight is measured in kilograms and the height is measured in metres. The SI unit of BMI will be given in kg/m².

Note: There's no way to distinguish between fat and muscles using BMI. Therefore, a person with a high BMI due to muscle mass need not worry about health issues associated with obesity or being overweight.

Prerequisites:

This tutorial assumes you already have a basic understanding of html, css and javascript and is intended for anyone who is learning how to code in javascript and also looking for a little project to practice with.

We're not going to be using any css in this tutorial, so feel free to style this project the way you like.

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 entire HTML we will be using for the project. Nothing complex, just all the elements needed to have the calculator.

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); 
    result.innerText = BMI;

    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 within the obese range";
    }
});

Javascript Explained:

To explain the javascript, let's split the code into 3 parts.

Part 1:

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;

In this part of the code, all we did was to get from the DOM, the html elements needed in the javascript.
In the last line of the above code, we declared the variables for the BMI, the height and the weight.

Part 2:

calculateButton.addEventListener("click", ()=>{

    height = heightInput.value;
    weight = weightInput.value;
    BMI = weight/(height**2); 
    result.innerText = BMI;

In this part of the code, the first thing we did was to add a click event listener to our calculate button.

This means that when the calculate button is clicked, the above code snippet allows us to store the value of the height and the weight that has been given to us by our users, then use those values to calculate the BMI.

Finally, the last line of the above code enables us to display the calculated BMI values to our users.

Part 3:

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 within the obese range";
    }
});