# 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!

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

System:
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).

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">`, 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

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 - 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. 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.

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. That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

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.

## 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!

### 6 thoughts on “Simple BMI Calculator In Javascript (Free Source Code)”

1. Hi, I used your BMI calculator codes with success but in Holland we do not use the Imperial system. I managed to delete the “Imperial” option but would also like to skip the radio button and text “Metric”. But deleting this will also break the calculation. Can you help me?

1. Just add some changes to `measureBMI()`. Do the weight/height conversion if both fields are populated and run `calcBMI()` afterward.