JavaScript BMI Calculator - Beginner Project


In this article, we are going to create a BMI calculator in Javascript. It is a beginner-friendly javascript project that will help you to understand the basics of javascript.

The BMI stands for Body Mass Index. It is a measure of body weight in relation to height. It is used to determine whether a person is underweight, normal, overweight, or obese.

The BMI is calculated by dividing the weight in kilograms by the square of the height in meters. The formula is weight / (height * height).

It is quite reliable and can be used to determine fitness levels.

The BMI calculator that we are going to create is shown below. There is also a button that takes you to the preview of the calculator.

JavaScript BMI Calculator Test the app

BMI Calculator In JavaScript

We are going to use HTML, CSS, and Javascript to create the BMI calculator. The calculator will have 2 input fields for weight and height.

The user will be able to enter the values in the input fields and click on the button to calculate the BMI. The result will be displayed in the result field.

We will first create the structure of the calculator and style it with CSS and then we will add the functionality to the calculator using Javascript.


Structure Of The Calculator (HTML + CSS)

I. Create Main Container For Calculator

The main container will be a div element with the class container that holds 2 other elements, one is the BMI calculator and the other is BMI status (range of BMI).

<div class="container">
  <div class="bmi-calculator"></div>
  <div class="bmi-status"></div>
</div>

The bmi-calculator will have all the inputs, calculate button, and the result field. The bmi-status will have a list of all the BMI ranges and categories of the user.

II. Create BMI Calculator Structure

Within the bmi-calculator element, we will have the following elements:

<div class="bmi-calculator">
  <h1>BMI Calculator</h1>
  <div class="input">
    <label for="height">Height (cm)</label>
    <input type="text" id="height" placeholder="Height in cm">
  </div>
  <div class="input">
    <label for="weight">Weight (kg)</label>
    <input type="text" id="weight" placeholder="Weight in kg">
  </div>
  <button type="submit" class="calculate">Check BMI</button>
  <div class="result"></div>
</div>

Now style the BMI calculator with CSS. The CSS style totally depends on your imagination and requirements.

The CSS code for the style we have used is given below.

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #e0e0e0;
}

.bmi-calculator {
  border-radius: 8px;
  background-color: #e0e0e0;
  padding: 20px;
  width: 300px;
  box-shadow: 5px 5px 10px #c1c1c1,
    -5px -5px 10px #ffffff;
}

h1 {
  margin: 0 0 10px 0;
  text-align: center;
}

.input {
  margin: 10px 0;
}

.input input {
  border: 1px solid #ccc;
  border-radius: 3px;
  height: 20px;
}

.input input:focus {
  outline: none;
}

.calculate {
  display: block;
  margin: 0 auto;
  padding: 10px;
  border: none;
  border-radius: 2px;
  background-color: #e4c495;
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 5px 5px 10px #c1c1c1,
    -5px -5px 10px #ffffff;
}

Here is what our app looks like for now.

BMI calculator HTML structure

III. Add BMI Status to show the BMI category

We will create a bmi-status element that will hold the BMI status. We will have 4 div elements for the ranges of BMI with the classes Underweight, Normal, Overweight, and Obese.

<div class="bmi-status">
  <div class="Underweight">Underweight: 0 - 18.5</div>
  <div class="Normal">Normal: 18.5 - 25</div>
  <div class="Overweight">Overweight: 25 - 30</div>
  <div class="Obese">Obese: 30 - 35</div>
</div>

The bmi-status element will be shown in the top right corner of the application. So we will use the position: absolute property to position the element.

.bmi-status {
  position: absolute;
  top: 0;
  right: 0;
}

.bmi-status div {
  margin: 0;
  padding: 5px;
  font-size: 15px;
  font-weight: normal;
}

.Underweight {
  background-color: #ffc0cb;
}

.Normal {
  background-color: #90ee90;
}

.Overweight {
  background-color: #ffa07a;
}

.Obese {
  background-color: #ff0000;
}

.Underweight,
.Normal,
.Overweight,
.Obese {
  font-weight: bold;
  margin-top: 20px;
  padding: 20px;
}

Here is what our app looks like.

complete HTML and CSS of BMI calculator

JavaScript Code for BMI Calculator

Here comes the most interesting part of the application. We will create the logic of the BMI calculator in JavaScript.

First, select the calculate button and add an event listener to it. When the user clicks on the button, we will calculate the BMI and display the result.

// select the calculate button
var calculate = document.querySelector('.calculate');

// attach event listener to the button
calculate.addEventListener('click', findBMI);

Write the function that will calculate the BMI.

In this function, first we will store the current values of height and weight from the input fields in variables. Then we will convert it to a number using + operator.

Now check if the height and weight are valid numbers and is not zero. If not, show an alert message and return.

Now convert the height to meter and find the BMI using the formula BMI = weight / (height * height).

Now execute the function showResult to show the result.

// write the function that will calculate the BMI
function findBMI() {
  var height = +document.querySelector('#height').value;
  var weight = +document.querySelector('#weight').value;
  // check height & weight are a valid number
  if (height <= 0 || weight <= 0 || isNaN(height) || isNaN(weight)) {
    alert('Please fill all fields with valid numbers');
    return;
  }
  // convert height to meters
  height = height / 100;
  var bmi = weight / (height * height);
  showResult(bmi);
}

Write the function that will show the result.

In this function, we will calculate the BMI category and store it in a variable called bmiStatus.

Now select the result element and set the innerHTML to the result. The innerHTML will be a div element whose class will be bmiStatus and text will be Your BMI is bmi and you are bmiStatus.

// write the function that will show the result

function showResult(bmi) {
  var result = document.querySelector('.result');
  var bmiStatus;
  if (bmi < 18.5) {
    bmiStatus = 'Underweight';
  } else if (bmi < 25) {
    bmiStatus = 'Normal';
  } else if (bmi < 30) {
    bmiStatus = 'Overweight';
  } else {
    bmiStatus = 'Obese';
  }
  result.innerHTML = `<div class=${bmiStatus}>Your BMI is ${bmi.toFixed(2)} and you are ${bmiStatus}.</div>`;
}

Complete Code For BMI Calculator

Here is the complete code for the BMI calculator.

Example

<!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 In JavaScript</title>
  <style>
    body {
      margin: 0;
      box-sizing: content-box;
      font-family: sans-serif;
    }

    .container {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #e0e0e0;
    }

    .bmi-calculator {
      border-radius: 8px;
      background-color: #e0e0e0;
      padding: 20px;
      width: 300px;
      box-shadow: 5px 5px 10px #c1c1c1,
        -5px -5px 10px #ffffff;
    }

    h1 {
      margin: 0 0 10px 0;
      text-align: center;
    }

    .input {
      margin: 10px 0;
    }

    .input input {
      border: 1px solid #ccc;
      border-radius: 3px;
      height: 20px;
    }

    .input input:focus {
      outline: none;
    }

    .calculate {
      display: block;
      margin: 0 auto;
      padding: 10px;
      border: none;
      border-radius: 2px;
      background-color: #e4c495;
      width: 100%;
      font-size: 16px;
      font-weight: bold;
      box-shadow: 5px 5px 10px #c1c1c1,
        -5px -5px 10px #ffffff;
    }

    .bmi-status {
      position: absolute;
      top: 0;
      right: 0;
    }

    .bmi-status div {
      margin: 0;
      padding: 5px;
      font-size: 15px;
      font-weight: normal;
    }

    .Underweight {
      background-color: #ffc0cb;
    }

    .Normal {
      background-color: #90ee90;
    }

    .Overweight {
      background-color: #ffa07a;
    }

    .Obese {
      background-color: #ff0000;
    }

    .Underweight,
    .Normal,
    .Overweight,
    .Obese {
      font-weight: bold;
      margin-top: 20px;
      padding: 20px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="bmi-calculator">
      <h1>BMI Calculator</h1>
      <div class="input">
        <label for="height">Height (cm):</label>
        <input type="text" id="height" placeholder="Height in cm">
      </div>
      <div class="input">
        <label for="weight">Weight (kg):</label>
        <input type="text" id="weight" placeholder="Weight in kg">
      </div>
      <button type="submit" class="calculate">Check BMI</button>
      <div class="result"></div>
    </div>
    <div class="bmi-status">
      <div class="Underweight">Underweight: 0 - 18.5</div>
      <div class="Normal">Normal: 18.5 - 25</div>
      <div class="Overweight">Overweight: 25 - 30</div>
      <div class="Obese">Obese: 30 - 35</div>
    </div>
  </div>

  <script>
    // select the calculate button
    var calculate = document.querySelector('.calculate');

    // attach event listener to the button
    calculate.addEventListener('click', findBMI);

    // function to find the BMI
    function findBMI() {
      var height = +document.querySelector('#height').value;
      var weight = +document.querySelector('#weight').value;
      // check height & weight are a valid number
      if (height <= 0 || weight <= 0 || isNaN(height) || isNaN(weight)) {
        alert('Please fill all fields with valid numbers');
        return;
      }
      // convert height to meters
      height = height / 100;
      var bmi = weight / (height * height);
      showResult(bmi);
    }

    // function to show the result
    function showResult(bmi) {
      var result = document.querySelector('.result');
      var bmiStatus;
      if (bmi < 18.5) {
        bmiStatus = 'Underweight';
      } else if (bmi < 25) {
        bmiStatus = 'Normal';
      } else if (bmi < 30) {
        bmiStatus = 'Overweight';
      } else {
        bmiStatus = 'Obese';
      }
      result.innerHTML = `<div class=${bmiStatus}>Your BMI is ${bmi.toFixed(2)} and you are ${bmiStatus}.</div>`;
    }
  </script>
</body>

</html>

Conclusion

We have created a JavaScript BMI calculator application. We have used HTML, CSS and, JavaScript to create the application.

It takes your height and weight as input and displays your BMI and tells you which category you fall in based on your BMI.

You can also work further and create an age calculator in javascript.