Build BMI Calculator in JavaScript

Hello! In this tutorial, we will be building a body mass index (BMI) calculator in JavaScript. This module can be included in any of the HTML files with a single line of code. This tutorial will not only enhance your knowledge about BMI calculation but also provide a basic understanding of JavaScript.

There are no specific pre-requisites for this tutorial. Although a basic understanding of HTML and DOM ( Document Object Model ) will give you an edge. The readers are suggested to use an editor while writing the code. I am using Visual Studio Code for editing, you can use any editor you are comfortable with.

How to make a BMI calculator using JavaScript

Firstly, what is the body mass index (BMI)?

Body mass index (BMI) is defined as the body mass divided by the square of the body height and is expressed in units of kg/m2, resulting from mass in kilograms and height in meters.

So, our main goal is to collect information from the height, weight information from the user, and calculate body mass index by the following formula:

Build BMI Calculator in JavaScript

Now we should collect mass and height-related information as follows:

  • Create a javascript file by the name of “bmi.js”.
  • Then write the following code to create an input interface for the user.
document.write("<div>");
document.write("<form>");
document.write("Weight(in Kilograms):<input type='float' id='weight' placeholder='weight in kg' /><br />");
document.write("Height (in cms):<input type='float' id='height' placeholder='height in cm' /><br />");
document.write('<input type="button" onclick="bmi()" value="Evaluate" /> <br />');
document.write('BMI: <input id="ans" type="text" /><br />');
document.write('Category: <input type="text" id="category" />');
document.write('<input type="reset" value="Reset"/>');
document.write('</form>');
document.write("</div>");

The function “document.write” is used to write to the HTML document in which the file “bmi.js” is included.

The interface looks like the below image:

Build BMI Calculator in JavaScript

Now we need to write a function named bmi to calculate the BMI of the user from the entered values. So add the following code in “bmi.js”. We can classify the BMI into the following categories:

BMI table

 

function bmi()
{
    var w = parseFloat(document.getElementById("weight").value);  // To get weight from the input with id as weight
    var h = parseFloat(document.getElementById("height").value)/100; // Convert height to meters
    var b = w/(h*h);  // According to the formula
    document.getElementById("ans").value = String(b.toPrecision(3)) +" kg/m^2"; // writing to the output 
    if (b < 18.5)
    {
        document.getElementById("category").value = "Underweight";
    }
    else if (b >= 18.5 && b <= 25)
    {
        document.getElementById("category").value = "Healthy weight";
    }
    else if (b > 25 && b <= 30)
    {
        document.getElementById("category").value = "Overweight";
    }
    else if (b > 30 && b <= 35)
    {
        document.getElementById("category").value = "Obese Class 1";
    }
    else if(b > 35 && b <= 40)
    {
        document.getElementById("category").value = "Obese Class 2";
    }
    else
    {
        document.getElementById("category").value = "Obese Class 3";
    }
}

Now we have to include this bmi calculator into an HTML file. We can do this by including the following line in the HTML file.

<script src="bmi.js"></script>

After this step, you can access the BMI calculator module from the HTML file.

Leave a Reply

Your email address will not be published. Required fields are marked *