A HTML BMI and Reverse BMI Calculator

4 Comments

BMI (Body Mass Index) is the standard for determining a person’s proper weight. It is the weight in kg divided by the square of the height squared in meters (kg/m*2).

This app calculates BMI and what I consider more important, Reverse BMI (the weight for a given BMI and height).

Here is the code:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'&gt;
<html xmlns='http://www.w3.org/1999/xhtml'&gt;
<head profile='http://gmpg.org/xfn/11'&gt;
<title>BMI</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal 800 18pt Arial; background: #FFDDAA}a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }
#t1, #t2, #t3, #t4, #t5, #b1, #b2, #ch1 {position: relative;font:normal normal 800 18pt Arial; text-align: center }
#t1, #t2, #t4 {width: 140pt}
#t3, #t5{width: 200pt}
</style>
</head>
<body>
<center><input type=”text” id=”t1″ name=”t1″ value=”Weight Lb / Kg” /> <input type=”text” id=”t2″ name=”t2″ value=”Height In / M” /> <input type=”text” id=”t4″ name=”t4″ value=”Desired BMI” /><br /><input type=”button” id=”b1″ name=”b1″ value=”BMI” onclick=’calc(“1″);’/> <input type=”button” id=”b2″ name=”b2″ value=”Reverse BMI” onclick=’calc(“2″);’ /> <input type=”checkbox” id=”ch1″ name=”ch1″ value=”Metric” />Metric<br /><br />
<input type=”text” id=”t3″ name=”t3″ value=”” /><br /><br /><input type=”text” id=”t5″ name=”t5″ value=”” /><br /><br /></center>
var ht = 0; var wt = 0; var bmi = “24”;
function calc(no) {
wt = document.getElementById(“t1”).value;
ht = document.getElementById(“t2”).value;
if (! document.getElementById(“ch1”).checked) ht *= 2.54/100;if (no == “1”) {
if (! document.getElementById(“ch1”).checked) wt /= 2.20462;
document.getElementById(“t3”).value = “BMI: ” + (wt/(ht * ht)).toFixed(1);
document.getElementById(“t5”).value = “”;
} else {
if (document.getElementById(“t4”).value != “Desired BMI”) bmi = document.getElementById(“t4”).value;
var clc = bmi*ht*ht;
if (! document.getElementById(“ch1”).checked) clc *= 2.20462;
document.getElementById(“t3”).value = “Desired Weight: ” + Math.floor(clc);
if (wt > clc) {
document.getElementById(“t5”).value = “Lose: ” + (Math.floor(wt) – Math.floor(clc));
} else {
document.getElementById(“t5”).value = “Gain: ” + (Math.floor(clc) – Math.floor(wt));
}
}
}

</body></html>

The input can be either pounds and inches or kg and meters. If metric values are used, the metric box must be checked.

English values must be converted to metric for the calculation. For BMI:
if (! document.getElementById(“ch1”).checked) ht *= 2.54/100;
if (! document.getElementById(“ch1”).checked) wt /= 2.20462;

For Reverse BMI:
if (! document.getElementById(“ch1”).checked) clc *= 2.20462;

The BMI calculation is:
document.getElementById(“t3”).value = “BMI: ” + (wt/(ht * ht)).toFixed(1);

The Reverse BMI calculation is:
document.getElementById(“t3”).value = “Desired Weight: ” + Math.floor(clc);
if (wt > clc) {
document.getElementById(“t5”).value = “Lose: ” + (Math.floor(wt) – Math.floor(clc));
} else {
document.getElementById(“t5”).value = “Gain: ” + (Math.floor(clc) – Math.floor(wt));

This is how the interface appears:

Click Image for larger view

bmi-interface

This is a BMI calculation in English units:

bmi

Click Image for larger view

This is a Reverse BMI calculation in metric units:

reverse-bmi

Click Image for larger view

4 thoughts on “A HTML BMI and Reverse BMI Calculator”

  1. Hello, I’d really like to use the reverse BMI calculator but I can’t get it to work. I’ve tried to run the code in w3schools.com but it doesn’t work. I’m afraid I’m not an HTML guru at all so if it doesn’t work by copying and pasting I haven’t got a clue!

    Any help would be much appreciated.

    Reply

    1. It is really very simple. Enter the desired bmi in the box.
      Enter your height either in inches or meters. If working metric check the metric box. If inches multiply feet by 12; ie; 6’1” is 73.
      Optionally, enter your weight.
      Then click Reverse BMI and it will give the wight you would need to have that bmi with your height.
      If you entered your weight it will also indicate how much weight you would need to gain or lose,

      Reply

Leave a comment