This content originally appeared on DEV Community and was authored by Shantanu Jana
In this article you will learn how to make BMI Calculator using HTML CSS JavaScript. The full form of BMI is the Body Mass Index which calculates the amount of mass in our body.
Watch its live demo to learn how it works. It can be calculated manually but you can do this very easily with the help of programming. Here I have shown you how to create BMI Calculator using JavaScript.
The BMI of a normal healthy person is between 18 and 25. You will need weight and height for this. We have created two sliders for weight and height input in this design. It will automatically calculate your BMI when you input information.
Below I have given the manual formula for calculating BMI.
BMI = (weight) / (height * height)
➤ Basic structure of BMI calculator
I have created the basic structure of this design using the following html css. First I designed the web page here and then I made a box.
The width of the box is 400px and the background color is white. Here we have used some box-shadow which has helped to enhance the beauty.
<div class="container">
</div>
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 100vh;
background: #046db9;
}
.container{
background-color: #ffffff;
padding: 30px 30px;
width: 50%;
min-width: 400px;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
border-radius: 5px;
font-family: 'Poppins',sans-serif;
box-shadow: 25px 25px 30px rgba(0,0,0,0.15);
}
➤ Add headings using HTML
Now I have added a heading in this BMI calculator. It is created by the H1 tag of html and then designed by css. I am using background color blue so I have used test color white.
<h1>BMI Calculator</h1>
.container h1{
background: #024b94;
color: white;
text-align: center;
font-size: 23px;
letter-spacing: 1px;
margin-top: -30px;
margin-left: -30px;
margin-right: -30px;
margin-bottom: 40px;
}
➤ Create a result viewing display
Now a display has been created for viewing calculations. As I said before there is a display that will help you see the calculations of the input functions.
<div class="display">
<p id="result">20.0</p>
<p id="category">Normal weight</p>
</div>
.display{
box-shadow: 0 0 20px rgba(0,139,253,0.25);
margin-bottom: 60px;
}
#result{
font-size: 30px;
font-weight: 700;
letter-spacing: 1px;
text-align: center;
color: #0be881;
}
#category{
font-size: 18px;
text-align: center;
letter-spacing: 1px;
}
➤ Create sliders to input height and weight
Now it's time to create an input place. Here I have taken the help of range for input and here I have added minimum and maximum limit.
<div class="row">
<input type="range" min="20" max="200" value="20" id="weight" oninput="calculate()">
<span id="weight-val">20 kg</span>
</div>
<div class="row">
<input type="range" min="100" max="250" value="100" id="height" oninput="calculate()">
<span id="height-val">100 cm</span>
</div>
.row{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
}
.row span{
font-weight: 500;
}
input[type="range"]{
width: 70%;
height: 3.5px;
-webkit-appearance: none;
appearance: none;
background-color: #dcdcdc;
border-radius: 3px;
outline: none;
}
I have designed the thumbnail of the input slider button using the following css. If you look, you will see that there is a button in the input slider that can be used to change the value of the slider.
These codes helped to design that button. Here I used the width and height of the button 15px and took the help of border-radius to make it round.
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance: none;
appearance: none;
height: 15px;
width: 15px;
background-color: #1c1c1c;
border-radius: 50%;
cursor: pointer;
}
➤ Activate the BMI calculator using JavaScript
Above we have designed it completely. Now is the time to implement this BMI calculator with the help of JavaScript. For this you must have an idea about basic JavaScript.
I have implemented the weight input space using the JavaScript line below. Everything you input here will be stored in a constant called 'weight'.
Then I used textContent to display it in web pages. As a result, the value of the range will change whenever you move the slider.
var weight = parseInt(document.getElementById("weight").value);
document.getElementById("weight-val").textContent = weight + " kg";
In the same way I have implemented the hide input space.
var height = parseInt(document.getElementById("height").value);
document.getElementById("height-val").textContent = height + " cm";
Below I have added the formula to calculate BMI. Here the value obtained from the formula I have stored in a constant called 'bmi'. Then using textContent I have arranged to show it in place of the result.
var result = document.getElementById("result");
var bmi;
bmi = (weight / Math.pow( (height/100), 2 )).toFixed(1);
result.textContent = bmi;
Now I have arranged to add a text here. As I said earlier a text can be found here. This text will give you information about your BMI status. For this I have used the 'if' function.
First I bet that when the value of BMI is less than 18.5 then the following text can be seen.
if(bmi < 18.5){
category = "Underweight 😒";
result.style.color = "#ffc44d";
}
Now I use else. If its value is more than 18.5 and less than 24.9 then the following text can be seen. This range is called normal, meaning that the BMI of a healthy person is between 18 and 24.
else if( bmi >= 18.5 && bmi <= 24.9 ){
category = "Normal Weight 😍";
result.style.color = "#0be881";
}
I have given the above condition using else again. If the value of BMI is more than 25 and less than 30, then you can see the text below.
else if( bmi >= 25 && bmi <= 29.9 ){
category = "Overweight 😮";
result.style.color = "#ff884d";
}
Now I have given the last condition. If the above conditions do not work then you can see the text below. This means that if the value of bmi is more than 30, then the following text can be seen.
else{
category = "Obese 😱";
result.style.color = "#ff5e57";
}
All the above text I have saved in 'Category'. Now we have arranged to display that 'category' in the display with the help of textContent.
document.getElementById("category").textContent = category;
Hope you find out from this article how I created this BMI calculator using javascript. You can download the source code if you want. If there is any problem, you can definitely comment.
You can visit my blog for more tutorials like this. 😊
https://www.foolishdeveloper.com/
This content originally appeared on DEV Community and was authored by Shantanu Jana
Shantanu Jana | Sciencx (2021-11-05T16:31:29+00:00) BMI Calculator Using HTML CSS & JavaScript. Retrieved from https://www.scien.cx/2021/11/05/bmi-calculator-using-html-css-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.