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

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

  1 2 3 4 5 6 7 8 9 10 11 12 13 

BMI Calculator



CSS

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21  

JS

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 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.
Md. Rabiul Mollah

Okay! So here I'm Md. Rabiul Mollah from Pathgriho Network. I'm currently a student of B.Sc in Textile Engineering Management at Bangladesh University of Textiles. facebook instagram github twitter linkedin