Simple BMI Calculator In Javascript (Free Source Code)

Welcome to a beginner’s tutorial on how to create a simple Javascript BMI calculator (for both metric and imperial units). This one is for you health-conscious code ninjas, or students who are looking to do a simple project. Yep, a BMI calculator actually involves only an HTML form and simple calculations using Javascript – That’s it, any beginner code ninja should be able to do it. Read on for the exact steps on how to create one!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

TABLE OF CONTENTS

Download & Demo BMI Basics BMI Calculator
Useful Bits & Links The End

 

 

DOWNLOAD & DEMO

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

BMI CALCULATOR DEMO

System:
Weight (KG):
Height (CM):

 

BMI BASICS

All right, let us now get started with the basics – Just what is BMI and how it is calculated.

 

WHAT IS BODY MASS INDEX (BMI)?

BMI, formerly called the Quetelet index, is a measure for indicating nutritional status in adults. It is defined as a person’s weight in kilograms divided by the square of the person’s height in metres (kg/m2).

World Health Organization Europe

Simply put, BMI is nothing but a number used to indicate if one has the “correct weight for the given height”.

 

 

HOW TO CALCULATE BMI

In the metric system, BMI is calculated with the following formula:

BMI = Mass (kg) ÷ Height2 (m)

For you guys who are using the Imperial measurement system, simply multiply it by 703:

BMI = 703 X Mass (lbs) ÷ Height2 (in)

The resulting BMI will indicate whether a person is underweight, just right, or overweight. Adapting the table from WHO again:

BMI Nutritional Status
Below 18.5 Underweight
18.5 – 24.9 Normal Weight
25.0 – 29.9 Pre-obesity
30.0 – 34.9 Obesity Class I
35 – 39.9 Obesity Class II
Above 40 Obesity Class III

 

 

THE BMI CALCULATOR

So far so good? Let us now “translate” the above formulas and results into a script.

 

THE HTML

1-bmi.html
<form id="bmi-form" onsubmit="return calcBMI();">
  <div class="bmi-label">System:</div>
  <div class="bmi-row">
    <label>
      <input type="radio" id="bmi-metric" name="bmi-measure" onchange="measureBMI()" checked/> Metric
    </label>
    <label>
      <input type="radio" id="bmi-imperial" name="bmi-measure" onchange="measureBMI()"/> Imperial
    </label>
  </div>
 
  <div class="bmi-label">
    Weight (<span id="bmi-weight-unit">KG</span>):
  </div>
  <div class="bmi-row">
    <input id="bmi-weight" type="number" min="1" max="635" required/>
  </div>
 
  <div class="bmi-label">Height (<span id="bmi-height-unit">CM</span>):</div>
  <div class="bmi-row">
    <input id="bmi-height" type="number" min="54" max="272" required/>
  </div>
 
  <input type="submit" value="Calculate BMI"/>
  <span id="bmi-results"></span>
</form>

The HTML should not be too difficult to understand. It is only a simple <form> with only 3 fields… and a submit button.

  • System – Metric or imperial system.
  • Weight – Self-explanatory.
  • Height – Captain Obvious.

Also, take note of the various tiny details here:

  • When the user selects either <input type="radio" id="bmi-metric"> or <input type="radio" id="bmi-imperial">, that will fire onchange="measureBMI()" to handle the unit change – More on that below.
  • The measurement units are wrapped in <span id="bmi-weight-unit"> and <span id="bmi-height-unit"> so we can change them when the user switches the unit.
  • All form checking is strictly done using HTML only – type="number", min="XXX", max="XXX", and required. I.E. We do not need to manually check if the user has entered a valid number using Javascript.
  • Finally, onsubmit="return calcBMI()" will handle the calculations when the form is submitted, and the results will be put into <div id="bmi-results"></div>.

 

 

THE JAVASCRIPT

2-bmi.js
// (A) CHANGE BMI MEASURING SYSTEM
function measureBMI () {
  // (A1) GET HTML ELEMENTS
  let unit = document.getElementById("bmi-metric").checked,
      weight = document.getElementById("bmi-weight"),
      weightu = document.getElementById("bmi-weight-unit"),
      height = document.getElementById("bmi-height"),
      heightu = document.getElementById("bmi-height-unit");
 
  // (A2) UPDATE HTML FORM FIELDS
  // TRUE = METRIC, FALSE = IMPERIAL
  if (unit) {
    weightu.innerHTML = "KG";
    weight.min = 1; weight.max = 635;
    heightu.innerHTML = "CM";
    height.min = 54; height.max = 272;
  } else {
    weightu.innerHTML = "LBS";
    weight.min = 2; weight.max = 1400;
    heightu.innerHTML = "IN";
    height.min = 21; height.max = 107;
  }
}
 
// (B) CALCULATE BMI
function calcBMI () {
  // (B1) GET HTML ELEMENTS
  let bmi = null,
      unit = document.getElementById("bmi-metric").checked, // true = metric, false = imperial
      weight = parseInt(document.getElementById("bmi-weight").value),
      height = parseInt(document.getElementById("bmi-height").value),
      results = document.getElementById("bmi-results");
 
  // (B2) CALCULATE BMI
  // METRIC BMI = MASS (KG) / HEIGHT (M) SQUARE
  if (unit) {
    height = height / 100;
    bmi = weight / (height * height);
  }
  // IMPERIAL BMI = 703 X MASS (LBS) / HEIGHT (IN) SQUARE
  else {
    bmi = 703 * (weight / (height * height));
  }
  // ROUND OFF
  bmi = Math.round(bmi * 100) / 100; // Round off 2 decimal places
 
  // (B3) SHOW RESULTS
  if (bmi < 18.5) {
    results.innerHTML = bmi + " - Underweight";
  } else if (bmi < 25) {
    results.innerHTML = bmi + " - Normal weight";
  } else if (bmi < 30) {
    results.innerHTML = bmi + " - Pre-obesity";
  } else if (bmi < 35) {
    results.innerHTML = bmi + " - Obesity class I";
  } else if (bmi < 40) {
    results.innerHTML = bmi + " - Obesity class II";
  } else {
    results.innerHTML = bmi + " - Obesity class III";
  }
  return false;
}

This one may look pretty complicated at first, but take a step back, and they are actually 2 simple functions:

  • function measureBMI() – Handles the switch between imperial and metric units. Basically just updates between KG/CM and LBS/IN.
  • function calcBMI() – Does the calculation of the BMI, literally grabs the numbers of the <input> fields, does the calculation, and shows the result.

 

 

USEFUL BITS & LINKS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

 

ADULT BMI ONLY!

Please take note that the above BMI calculation is only accurate for adults. There is a different set of BMI calculations for children and teens – cdc.gov

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published.