BMI Calculator with Source Code (HTML, CSS and JavaScript)

byMd. Rabiul Mollah -April 13, 2021

0

What is BMI?

BMI (Body Mass Index) means the ratio of a person’s weight (kg) and the square of that person’s height (m). By calculating BMI, one can get an overall idea about one’s health condition. It indicates one’s health condition in some different range. If anyone’s BMI is less than 18.5, he/she is unhealthy. Basically, he/she is unhealthy because he/she is too thin. Again, any value over 25.0 also indicates an unhealthy situation, and this time he/she has overweight. If it is over 30, then his/her condition is seriously dangerous.

BMI Calculator with Source Code (HTML, CSS and JavaScript)

Source: ToolKib

The ideal value of BMI is 18.5 to 24.9. Anyone having a BMI within this range is healthy enough to lead a better life.

BMI Range	Health Condition
-18.5	Unhealthy (Thin health)
18.5-24.9	Healthy (Ideal)
25-29.9	Unhealthy (Overweight)
30+	Serious condition

Ranges of BMI values. Source: Wikimedia Commons

How to calculate BMI manually?

You can calculate BMI manually and using a free online tool. For manual process, you have to follow the formula of ‘Body Mass Index (BMI) = Weight in Kilograms/ (Height in meters)^2'

What is BMI Calculator?

A BMI calculator is a tool that helps to find out BMI easily. By using a BMI calculator, one does not need to calculate manually. He can just put his weight in kilogram and height in meter and click the button “Calculate”/or something of the same task. The calculator will give him his BMI result and as well as comment on his health condition.

Here is a BMI calculator. You can try it.

How to make a BMI calculator using HTML, CSS and JS?

Making a BMI calculator is not a big deal. You can make it easily using only HTML and JS. If you are interested in making some formatting, then you may use a bit of CSS. Here we are giving the source code we used to make the tool you’ve seen earlier. But before giving that, we think you should know some more stuff about this.

Though we made this tool which can calculate only from kg and meters. But in our everyday life, you may measure your height in Feet and Inches. So, you can add those options as well. But as we tried to keep it simple, we simply did it. So the Source code is below. Copy them and paste into your editor and then keep editing as your will.

HTML

<div>
<form name="techBMI">
<h3>BMI Calculator</h3>
<br/>
<input type="text" name="weight" placeholder="Enter Weight (kg)" size="20"><br /><br/>
<input type="text" name="height" placeholder="Enter Height (Meters)" size="20"><br /><br/>
<input class="decoration-one px-3 py-2" type="button" value="Calculate BMI" onClick="calculateBmi()"><br /><br/>
<input type="text" name="bmi" placeholder="Your BMI Will be here" size="20"><br /><br/>
<input type="text" name="meaning" size="35"><br /><br/>
<input class="decoration-one px-3 py-2" type="reset" value="Reset" />
<br/>
</form>
</div>

CSS

 <style>
     *   {
    box-sizing: border-box;
}
.decoration-one {
    background-color:rgb(249, 154, 154);
    margin: 0;
    border:0;
    border-radius: 12px;
    padding: 9px;
    font-weight: bold;
}
.decoration-one:hover {
    background-color:yellow;

}
a {
    text-decoration: none;
    color:black;
}
</style>

JS

function calculateBmi() {
var weight = document.techBMI.weight.value
var height = document.techBMI.height.value
if(weight > 0 && height > 0){	
var finalBmi = weight/(height*height)
document.techBMI.bmi.value = finalBmi.toFixed(3);
if(finalBmi < 18.5){
document.techBMI.meaning.value = "You are unhealthy, too thin."
    }
if(finalBmi > 18.5 && finalBmi < 25){
document.techBMI.meaning.value = "You are healthy enough."
    }
if(finalBmi > 25 &&  finalBmi <30){
document.techBMI.meaning.value = "You have overweight."
    }
if(finalBmi > 30){
document.techBMI.meaning.value = "Your condition is serious."
    }
    }
    else{
    alert("Data you've entered might be incorrect. Please check and try again.")
    }

    }

That's it. You can now try it, you can now make one yourself. Subscribe TechKib to get our updates in your mailbox.

Tags: web-development