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
This site runs on the Thesis WordPress Theme
If you're someone who doesn't understand a lot of PHP, HTML, or CSS, Thesis will give you a ton of functionality without having to alter any code. For the advanced, Thesis has incredible customization possibilities via extensive hooks and filters. And with so many design options, you can use the template over and over and never have it look like the same site.
If you're more familiar with how websites work, you can use the fantastic Thesis User's Guide and world-class support forums to make more professional customizations than you ever thought possible. The theme is not only highly customizable, but it allows me to build sites with a much more targeted focus on monetization than ever before. You can find out more about Thesis below:
{ 1 trackback }