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 BASICS & DEMO
All right, let us now get started with the basics – Just what is BMI, and how it is calculated.
BMI CALCULATOR DEMO
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
<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 fireonchange="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"
, andrequired
. 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.
DOWNLOAD & NOTES
Firstly, here is the download link to the example code as promised.
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.
EXTRA 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
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.
- (B1) Remove
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
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!
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?
Thanks in advance for your support.
Regards,
Jan
Sorry, you will have to find out what is “breaking” in your own changes. Good luck!
https://code-boxx.com/faq/#help “I cannot provide free troubleshooting and support for personal projects”
Hi, thanks for this. The Zip file is asking for password, can you share us the passcode
Not sure where you got that zip file. There are over 500 tutorials and projects on this website, and none of them is password protected.
Hi, I really like your tutorial. Do you know the way that it would be possible to make it automatically convert units when they are switched? For example, if I type in kg/cm metrics and click Imperial afterwards, to automatically count how much that would be in lbs/in. Also, is it possible to switch to Feet and Inches instead of only Inches, considering most of the people use that for measuring their height?
Thank you very much for this nice post and best regards,
Swanky Fella Team
Just add some changes to
measureBMI()
. Do the weight/height conversion if both fields are populated and runcalcBMI()
afterward.