Hosted Project
https://js-beginners.github.io/weight-conversion-tool/GitHub Source Files
https://github.com/JS-Beginners/weight-conversion-toolProject Objective
The objective of this JavaScript project is to wire up a very basic JavaScript weight conversion calculator.JavaScript Used
- JavaScript conditionals
- JavaScript addEventListener property
- JavaScript CSS selectors
My Personalize Summary
The calculator requires just one input, your weight in pounds. Once you give the value to your calculator and press the enter key, your calculator returns the value of your weight in kilograms. I actually didn't watch the author's solutions so I don't know for sure if he used inline JavaScript like he did for previous projects.New Things Learned or Refreshed
Since this project is very similar to the previous BMI calculator project, I had no issues other than forgetting a few things. Just like in the previous project, I had to use the isNaN() function. In review, in JavaScript, NaN is NOT equal to NaN. NaN is a falsey value. In other words, it's as if you're asking JavaScriptif (true === false){}
.
In realty, since I applied the type=”number” attribute to my HTML input element, I don't think I needed to check for NaN.
But, I supposed it's always good practice to use JavaScript for data validation, instead of HTML.
Anyway, it was a fun refresher and I challenge you to get it done as well.
Time to Code
This project took me about 25 minutes to 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
- Download the source code from the github repository above.
- Delete the contents of the
app.js
file. - Implement the JavaScript code in your own
app.js file.
- If you think you need to see a video solution first, be sure to pick up Bluelime's 27 JavaScript Projects Beginner Course .
- Add a link to your finished project below!
What You Should See
Visit the hosted github page to see this JavaScript Pound to Kilogram Calculator in action.Need to see the video solution for this project?
Get BlueLime's JavaScript for Beginners: Create 27 Projects from Scratch Course
Leave a Reply