JavaScript BMI Calculator Project

Hosted Project

https://js-beginners.github.io/BMI-calculator/

GitHub Source Files

https://github.com/JS-Beginners/BMI-calculator

Project Objective

The objective of this JavaScript project is to wire up a very basic JavaScript BMI Calculator.

JavaScript Used

• JavaScript conditionals
• JavaScript addEventListener property
• JavaScript CSS selectors

My Personalize Summary

The calculator requires just two inputs, your height in centimeters and your weight in kilograms. Once you give the two values to your calculator and click the calculate button (or press enter) you'll get a BMI readout. Unlike the previous projects, the author does not use any inline JavaScript. He used an external JavaScript file.

New Things Learned or Refreshed

Once of the most important pieces of content in this code was a part of JavaScript that some would call weird. In this code, you must use JavaScript's isNaN() function to check whether or not a value evaluates to Not a Number. This may come up if you incorrectly try to use the boolean expression if (NaN === NaN){ }. In JavaScript, NaN is NOT equal to NaN. NaN is a falsey value. In other words, it's as if you're asking JavaScript if (true === false){}. Here's the explanation behind the isNaN() function from the MDN documentation. Other than this, the code was straight forward. You can take the code much further by adding the option to calculate BMI if a user enters pounds or inches instead of centimeters and kilograms.

Time to Code

This project took me about 20 minutes to listen, watch, and code out the solution.

Lines of Code

This project uses around 20 lines of JavaScript code, including white space and code comments.

Your Turn!

What to Accomplish

1. Download the source code from the github repository above.
2. Delete the contents of the script.js file.
3. Implement the JavaScript code in your own script.js file.
4. If you think you need to see a video solution first, be sure to pick up Bluelime's 27 JavaScript Projects Beginner Course .
5. Add a link to your finished project below!

What You Should See

Visit the hosted github page to see this JavaScript BMI Calculator in action.

Need to see the video solution for this project?

Get BlueLime's JavaScript for Beginners: Create 27 Projects from Scratch Course