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!

 

TABLE OF CONTENTS

 

 

 

BMI CALCULATOR DEMO

System:

Metric Imperial

Weight (KG):

Height (CM):

 

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) ÷ Height² (m)

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

BMI = 703 X Mass (lbs) ÷ Height² (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 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">, which 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

// (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 - 2 DECIMAL PLACES
  bmi = Math.round(bmi * 100) / 100;
 
  // (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.

 

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

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

 

I WANT TO REMOVE METRIC/IMPERIAL

If you only use one measuring system:

• Update the HTML form
  • Remove the metric/imperial buttons.
  • Update the min/max weight and height accordingly.
• Remove measureBMI(), since there’s no use for this function anymore.
• Update calcBMI().
  • (B1) Remove unit, there’s no need to check for the unit anymore.
  • (B2) Update the calculation accordingly.

 

LINKS & REFERENCES

• Body Mass Index – Wikipedia
• If you are wondering where the min/max weight and height came from:
  • List of the verified shortest people – Wikipedia
  • Tallest Man – Guinness World Records
  • List of heaviest people – Wikipedia
• Basic BMI Calculator HTML/Javascript – Stack Overflow
• Example on CodePen – BMI Calculator