JavaScript BMI Calculator
Time for some learnin' & JavaScriptin'
One thing I had to do for a client a while back was create a JavaScript body mass index calculator.
She just wanted 2 fields:
- Height (inches)
- Weight (pounds)
On that same page she also had a table displaying the translation of BMI calculations from the CDC Website.
| BMI | Weight Status |
|---|---|
| Below 18.5 | Underweight |
| 18.5 – 24.9 | Normal |
| 25.0 – 29.9 | Overweight |
| 30.0 and Above | Obese |
So being me, I decided this would be way cooler if not only did it spout out your BMI, but if it also highlited the proper category for you. Cool? Maybe not so much so, but it's neat enough!
Let's start out with...
The Form
The form is simple enough. Two fields with a button within the <form> named bmi
<form name="bmi">
<label for="height">Height(in):<br/>
<input type="text" name="height" id="height" value="" /></label><br />
<label for="weight">Weight (lb):<br/>
<input type="text" name="weight" id="weight" value="" /></label><br />
<input type="button" value="Calculate" id="calc" name="calc" />
</form>
Boring, I know, we'll jazz it up with styles later. Promise. Oh and don't forget to put the <p> with an id of 'BMIoutput' on your page too. This is where your calculated BMI will go.
<p id="BMIoutput"></p>
Demo: Step 1
Continue on to page 2: Adding the JavaScript to make it work
the newest discoveries, stories and shared tips!Come on, all the cool kids are doing it ;)
