DEV Community

Cover image for How to build a simple BMI calculator using html and javascript
Jima Victor
Jima Victor

Posted on • Originally published at webcodespace.com

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>
Enter fullscreen mode Exit fullscreen mode

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";
    }
});
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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";
    }
});
Enter fullscreen mode Exit fullscreen mode

This is the last part of the code, and in this part, all we are interested in, is to evaluate the calculated BMI value using if/else statements.

A BMI less than 18.5 means your BMI falls within the underweight range.

A BMI between 18.5 and 24.9 means your BMI falls within the normal or healthy weight range.

A BMI between 25 and 29.9 means your BMI falls within the overweight range.

A BMI greater than 29.9 means your BMI falls within the underweight range.

If you have any questions, you can leave them in the comments below and I will try my best to answer them as soon as I can.

Top comments (2)

Collapse
 
suhakim profile image
sadiul hakim

Nice job but code is colourless

Collapse
 
jimajs profile image
Jima Victor

Thank you. I'll work on that..