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

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

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