Inspiration
This project idea was inspired by the bmi calculators that are available online but does'nt have that attractive UI for the web and is really boring to use. So, I built this web app to help people know about their body mass index with an interactive UI which enhances user experience.
What it does?
BMI is a measurement of a person's leanness or corpulence based on their height and weight , and is intended to quantify tissue mass. It is widely used as a general indicator of whether a person has a healthy body weight for their height. Specifically, the value obtained from the calculation of BMI is used to categorize whether a person is underweight, normal weight, overweight, or obese depending on what range the value falls between.
How we built it
This project was built using VS Code editor using Html5, Css3 and JavaScript(Vanilla Js) **. The skeleton of this project was made using **Html5 and was later on designed using Css3. The functionalities to each of the icons was added using JavaScript where we created functions to invoke methods that take in user inputs as mouse click, sliders and store values in specific variables. Then the specific calculations are performed based on the user input and the result is shown.
Challenges we ran into
The first challenge that I face was making the web app responsive and making the toggle effect in the button. Later I came across things like to store the data of the particular element locally in the browser, the calculation of bmi in different units. These are few of the major challenges that I came across.
Accomplishments that we're proud of
I was really happy to overcome all the errors that I faced during the project and could successfully complete it.
What we learned
From this project I have learned how to store values in the local storage of the browser using JavaScript. How to make the website responsive and toggling of the buttons when clicked. I also learned how to add and remove classes in JavaScript. This project also helped me learn the use of console in depth and use it to rectify errors and have a deeper look on what actually goes in the actual processing part of the code.
What's next for Bmi Calculator
For the future updates I have thought about adding more features like ** calculating the body fat percentage based on the calculated bmi** and also plan a daily diet chat and workout to remain in the normal bmi range.
Log in or sign up for Devpost to join the conversation.