Our Thoughts

Oct
28
2017

Creating a jQuery BMI Calculator

by Cat

I know I know. Creating a jQuery BMI calculator is probably not high on anyone‘s list, but in case anyone is interested, here’s one that we’ve done.

Our BMI calculator contains three fields: 1) Weight; 2) Height in ft; 3) Height in inches. After the user inputs and submits his or her weight and height, we can use a simple formula to calculate which BMI category he or she belongs to and display that on the page.

In addition to the most basic calculator, we also add a paragraph or two of text to explain what each of the BMI categories means. To create visual interest, we give each category a different set of font / background colors. A pop-up appears on clicking the question mark icon to show the range of BMI numbers that correlate with each category. Finally, clicking on the email icon will open the default email client with an email populated with the user’s BMI information.

Demo
Download Source