This project is a simple weight converter calculator that allows you to convert pounds to kilograms. It's a basic web page with an input field where you can type in your weight in pounds. As soon as you enter a value in the input field, the calculator will automatically convert the weight to kilograms and show you the result.
The result is displayed below the input field in a span element with the class .final-answer. If you make an error and enter an invalid input, an error message will be displayed in a p element with the class .error-line.
The calculator uses a weightConvert() function written in JavaScript to perform the conversion. The function checks if the input value is valid and then converts it to kilograms if it is. It also includes a timeout function to clear the error message and the result after a certain amount of time has passed.
Overall, this project is a simple and useful tool for anyone looking to quickly convert their weight from pounds to kilograms!
You can try out the application by visiting this link.
- HTML
- CSS
- JavaScript
To get started with this project, clone the repository and open the index.html file in your preferred web browser.
I learned about using setTimeout() and clearTimeout() functions in JavaScript for implementing timed events. These functions are useful for displaying messages, animations, or updating data after a specified period.
Additionally, I also learned about the oninput attribute in HTML, which allows me to execute a JavaScript function whenever the input value of an HTML element is changed. In the code snippet provided, oninput is used to call the weightConvert() function whenever I type a new value in the input field. This ensures that the weight conversion is performed in real-time as I type, and the result is immediately displayed on the screen. These are handy features to know for building interactive and responsive web applications.
One of the challenges that I faced while working on the weight converter project was figuring out how to handle negative numbers. When I inputted negative numbers or just a negative sign, the result would display as 0.00, which wasn't what I wanted. I tried a few things to fix this issue, but nothing seemed to work.
After doing some research, I discovered that I could use the isNaN() function to check if the input was not a number. I then added an additional condition to the validation check in the weightConvert() function to ensure that the input was not only greater than 0 but also not NaN.
Another issue I faced was that the error message would continue to display even after entering a valid input. I realized that I needed to add the clearTimeout() function within the else block of the weightConvert() function to clear the timeout set by the error message when a valid input was entered. This allowed me to display the result without the error message continuing to show.
Overall, it was a learning experience, and I was able to overcome these challenges by doing research and experimenting with different solutions.
