BMI Calculator is a well-known standard to know the body to mass index. Based on the height and weight of a person, the BMI Calculator tells the fat percentage of a person’s body. BMI is calculated by taking the weight of a person in kilograms which is then divided by the square of the height of the person in meters. The formula for the same is:
- BMI = (weight)/(height*height) where, weight is in Kg, height is in meters.
In this short tutorial, we will be coding a BMI Calculator which takes the input from the user and displays the result based on the values they put in. The logic is written in JavaScript, which is a great programming language to work with.
Table of Contents
Working Logic to code a BMI Calculator
We have given a proper front-end to the program, to make the User Experience(UX) smooth. We have first created an HTML file in which we have our input fields. The input fields take the user’s height and weight. Then there’s a submit button which on click is providing functionality to our program. JavaScript has events, one of them is onclick(). This event when executed performs a JS function that is assigned to it. The function in this program is BMICalc(), which has its code written in a separate .js File.
The function simply takes the input that was entered by the user and stores them in a separate variable. Then it performs the formula to calculate BMI on those variables. Now we have this result stored in a different variable known as “bmi”. We have then added if and else conditional statements to check the range of the user’s bmi. Now depending upon the user’s bmi, the user will get a customized message. The message will tell the bmi of the user. And also a message showing what the user’s bmi indicates. For eg., If the bmi lies below 18.5, the user gets a message as ” Your bmi is __, so you are underweight” and so on for upper bmi ranges.
Additionally, we’ve styled our html page using CSS selectors. Testing your coding skills by making such small and fun projects is always helpful and encouraging. You are free to use the code as it is. Or if you need, you can even modify it.
How to use the code?
- Open code editor of your choice and make a folder in it.
- Now inside that folder, make 3 separate files
- one with .html extension
- second with .css extension
- and the third with .js extension
- Copy paste the following code one by one in each of their respective files and save them.
- Simply run the .html file in your browser and now you have your own BMI Calculator.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI Calculator</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kaisei+HarunoUmi:wght@500&display=swap" rel="stylesheet">
<script src="index.js"></script>
</head>
<body>
<div id="bmibox"></div>
<div id="msgbox"></div>
<h1>Calculate Your Body Mass Index </h1>
<label for="">Enter Your Weight <span>(in Kg)</span> </label>
<br>
<input type="number" name="" id="weight">
<br>
<label for="">Enter Your Height <span>(in meter)</span> </label>
<br>
<input type="number" name="" id="height">
<br>
<input type="submit" value="Check Result" id="submit" onclick="BMICalc()">
</body>
</html>CSS Code (Optional)
body {
text-align: center;
font-family: 'Kaisei HarunoUmi', serif;
background-color: rgb(204, 203, 203);
}
h1 {
font-size: 2.4rem;
text-decoration: underline;
}
label {
font-size: 1.2rem;
}
#weight,
#height {
padding: 2px;
border: 0px;
width: 20%;
line-height: 1.4rem;
margin-top: 1rem;
}
span {
font-size: .8rem;
color: rgb(6, 4, 131);
}
#submit {
margin-top: 1rem;
background-color: rgb(80, 80, 83);
font-weight: 800;
color: white;
border: 0px;
cursor: pointer;
padding: .4rem;
}JavaScript Code
function BMICalc() {
var weight = parseFloat(document.querySelector("#weight").value);
var height = parseFloat(document.querySelector("#height").value);
var bmi = weight / (height * height);
bmi = parseFloat(bmi).toFixed(4);
if (bmi < 18.5) {
document.getElementById("bmibox").innerHTML = bmi;
document.getElementById("msgbox").innerHTML =
"Your BMI is " + bmi + " , so you are underweight!";
document.getElementById("msgbox").style.color = "yellow";
} else if (bmi>=18.5 && bmi<24.9) {
document.getElementById("bmibox").innerHTML = bmi;
document.getElementById("msgbox").innerHTML =
"Your BMI is " + bmi + " , so you have normal BMI!";
document.getElementById("msgbox").style.color = "green";
} else if (bmi>=25 && bmi<29.9) {
document.getElementById("bmibox").innerHTML = bmi;
document.getElementById("msgbox").innerHTML =
"Your BMI is " + bmi + " , so you are overweight!";
document.getElementById("msgbox").style.color = "red";
} else {
document.getElementById("bmibox").innerHTML = bmi;
document.getElementById("msgbox").innerHTML =
"Your BMI is " + bmi + " , so you are suffering from obesity!";
document.getElementById("msgbox").style.color = "maroon";
}
}Note: parseFloat() is used to convert the input strings into float/decimal numbers to make calculations using them. toFixed(n) is used to display a number up to ‘n’ decimal places. In this program, the result will get displayed only up to 4 decimal places since we’ve given ‘n’ as 4.
So that’s all you need to code a BMI Calculator of your own. There can be many variations of this program and you are free to use them or code something from scratch of your own.
Thank you so much for reading this article! I hope you found this beginner-level JavaScript project useful. Share this article with someone who needs help with beginner-level projects. Leave a comment to share your feedback or if you have any doubt.
It is one of the projects that we have on this site. Make sure to check out the other Projects and Useful articles here:
12 Comments
Cedric Noronha · September 1, 2021 at 10:10 pm
Very good post about how to code a BMI calculator using javascript. Highly informative and nicely written. Keep up the good work.
Vaishali Rastogi · September 1, 2021 at 10:41 pm
Thank you so much!
technology · February 21, 2022 at 2:53 am
cialis online https://telegra.ph/Technology-A-linchpin-To-Maintain-Businesses-Handle-Remote-Workforce-Amid-Pandemic—Technology-02-16
You actually reported it effectively!
https://swerbus.webgarden.com/ · March 31, 2022 at 5:41 pm
buy cialis online https://swerbus.webgarden.com/
Wonderful material. Many thanks.
andere.strikingly.com · April 1, 2022 at 1:17 pm
purchasing cialis on the internet https://andere.strikingly.com/
Awesome content. Kudos!
kernyusa.estranky · April 1, 2022 at 4:07 pm
online prescriptions without a doctor https://kernyusa.estranky.sk/clanky/risk-factors-linked-to-anxiety-disorders-differ-between-women-and-men-during-the-pandemic.html
Great forum posts. Thanks a lot.
sciencedirect · April 2, 2022 at 5:54 pm
tadalafil tablets https://gerweds.over-blog.com/2022/03/modeling-covid-19-mortality-risk-in-toronto-canada-sciencedirect.html
You definitely made your point.
covid19 · April 2, 2022 at 5:56 pm
buy cialis https://telegra.ph/How-Has-The-COVID-19-Pandemic-Changed-Our-Lives-Globally-02-24
Lovely forum posts, Many thanks.
covid-cribsheet · April 4, 2022 at 8:11 pm
tadalafil 5mg https://keuybc.estranky.sk/clanky/30-facts-you-must-know–a-covid-cribsheet.html
Appreciate it, Lots of information!
canadianpharmacy · April 5, 2022 at 4:08 pm
canadian pharmaceuticals online https://gwertvb.mystrikingly.com/
Regards. An abundance of knowledge!
telegraph · April 6, 2022 at 6:45 pm
tadalafil without a doctor’s prescription https://telegra.ph/Is-It-Safe-To-Lift-COVID-19-Travel-Bans-04-06
Thank you, Plenty of stuff!
https://chubo3.wixsite.com/canadian-pharmacy/post/what-parents-must-find-out-about-kids-and-covid-19 · April 9, 2022 at 12:58 pm
Canadian Pharmacy
Truly many of great tips!