BMI Calculator is a well-known standard to know the body to mass index. Based on the height and weight of a person, the BMI Calculator tells the fat percentage of a person’s body. BMI is calculated by taking the weight of a person in kilograms which is then divided by the square of the height of the person in meters. The formula for the same is:

  • BMI = (weight)/(height*height) where, weight is in Kg, height is in meters.
BMI Calculator using JS
BMI Calculator using JS

In this short tutorial, we will be coding a BMI Calculator which takes the input from the user and displays the result based on the values they put in. The logic is written in JavaScript, which is a great programming language to work with.

Working Logic to code a BMI Calculator

We have given a proper front-end to the program, to make the User Experience(UX) smooth. We have first created an HTML file in which we have our input fields. The input fields take the user’s height and weight. Then there’s a submit button which on click is providing functionality to our program. JavaScript has events, one of them is onclick(). This event when executed performs a JS function that is assigned to it. The function in this program is BMICalc(), which has its code written in a separate .js File.

The function simply takes the input that was entered by the user and stores them in a separate variable. Then it performs the formula to calculate BMI on those variables. Now we have this result stored in a different variable known as “bmi”. We have then added if and else conditional statements to check the range of the user’s bmi. Now depending upon the user’s bmi, the user will get a customized message. The message will tell the bmi of the user. And also a message showing what the user’s bmi indicates. For eg., If the bmi lies below 18.5, the user gets a message as ” Your bmi is __, so you are underweight” and so on for upper bmi ranges.

Additionally, we’ve styled our html page using CSS selectors. Testing your coding skills by making such small and fun projects is always helpful and encouraging. You are free to use the code as it is. Or if you need, you can even modify it.

BMI Calculator
BMI Calculator

How to use the code?

  • Open code editor of your choice and make a folder in it.
  • Now inside that folder, make 3 separate files
    • one with .html extension
    • second with .css extension
    • and the third with .js extension
  • Copy paste the following code one by one in each of their respective files and save them.
  • Simply run the .html file in your browser and now you have your own BMI Calculator.

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>BMI Calculator</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Kaisei+HarunoUmi:[email protected]&display=swap" rel="stylesheet">
    <script src="index.js"></script>

</head>

<body>
        <div id="bmibox"></div>
        <div id="msgbox"></div>
        <h1>Calculate Your Body Mass Index </h1>
        <label for="">Enter Your Weight <span>(in Kg)</span> </label>
        <br>
        <input type="number" name="" id="weight">
        <br>
        <label for="">Enter Your Height <span>(in meter)</span> </label>
        <br>
        <input type="number" name="" id="height">
        <br>

        <input type="submit" value="Check Result" id="submit" onclick="BMICalc()">
</body>

</html>

CSS Code (Optional)

body {
    text-align: center;
    font-family: 'Kaisei HarunoUmi', serif;
    background-color: rgb(204, 203, 203);
}

h1 {
    font-size: 2.4rem;
    text-decoration: underline;
}

label {
    font-size: 1.2rem;
}

#weight,
#height {
    padding: 2px;
    border: 0px;
    width: 20%;
    line-height: 1.4rem;
    margin-top: 1rem;
}

span {
    font-size: .8rem;
    color: rgb(6, 4, 131);
}

#submit {
    margin-top: 1rem;
    background-color: rgb(80, 80, 83);
    font-weight: 800;
    color: white;
    border: 0px;
    cursor: pointer;
    padding: .4rem;
}

JavaScript Code

function BMICalc() {
  var weight = parseFloat(document.querySelector("#weight").value);
  var height = parseFloat(document.querySelector("#height").value);
  var bmi = weight / (height * height);
  bmi = parseFloat(bmi).toFixed(4);
  if (bmi < 18.5) {
    document.getElementById("bmibox").innerHTML = bmi;
    document.getElementById("msgbox").innerHTML =
    "Your BMI is " + bmi + " , so you are underweight!";
    document.getElementById("msgbox").style.color = "yellow";
} else if (bmi>=18.5 && bmi<24.9) {
    document.getElementById("bmibox").innerHTML = bmi;
    document.getElementById("msgbox").innerHTML =
    "Your BMI is " + bmi + " , so you have normal BMI!";
    document.getElementById("msgbox").style.color = "green";
} else if (bmi>=25 && bmi<29.9) {
    document.getElementById("bmibox").innerHTML = bmi;
    document.getElementById("msgbox").innerHTML =
    "Your BMI is " + bmi + " , so you are overweight!";
    document.getElementById("msgbox").style.color = "red";
} else {
    document.getElementById("bmibox").innerHTML = bmi;
    document.getElementById("msgbox").innerHTML =
    "Your BMI is " + bmi + " , so you are suffering from obesity!";
    document.getElementById("msgbox").style.color = "maroon";
  }
}

Note: parseFloat() is used to convert the input strings into float/decimal numbers to make calculations using them. toFixed(n) is used to display a number up to ‘n’ decimal places. In this program, the result will get displayed only up to 4 decimal places since we’ve given ‘n’ as 4.

So that’s all you need to code a BMI Calculator of your own. There can be many variations of this program and you are free to use them or code something from scratch of your own.

Thank you so much for reading this article! I hope you found this beginner-level JavaScript project useful. Share this article with someone who needs help with beginner-level projects. Leave a comment to share your feedback or if you have any doubt.

It is one of the projects that we have on this site. Make sure to check out the other Projects and Useful articles here:


Vaishali Rastogi

Hey There! I am Vaishali Rastogi and I am a tech-researcher. I've been doing writing for a good 4-5 years, so here I am now. Working on my own website to make people digitally aware of the updates in technology.

2 Comments

Cedric Noronha · September 1, 2021 at 10:10 pm

Very good post about how to code a BMI calculator using javascript. Highly informative and nicely written. Keep up the good work.

Leave a Reply

Avatar placeholder

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

5 × four =