A counter to let you track and check your daily water intake.
JavaScript Basics Project for the Full Stack Developer course at start2impact University.
The application must be developed with JavaScript. The use of jQuery is not allowed, and neither is the use of any frameworks (React, Angular, Vue, or others). The use of external JavaScript libraries is allowed if necessary. The +/- buttons and the display of the counter value must be built using DOM manipulation with JavaScript. Once the elements are built with JavaScript, the function to increase and decrease the counter value must be implemented. All additional functionalities deemed necessary are allowed.
Click here for the full project requirements (Italian)
Water Counter is designed to help users stay hydrated and healthy by providing a simple and effective way to track and check their daily water intake.
Thanks to Water Counter, users can monitor the number of water glasses they drink in a day. The + and - button makes the number increase or decrease, while the reset button allows to reset the number at any time.
By clicking the 'check' button, a modal window appears with a message that adapts to the number of glasses of water consumed. If the number of glasses is 10 or more, a congratulatory message is displayed, while if it is less than 10, an encouraging message to drink more is shown.
Note: The European Food Safety Authority (EFSA) recommends that healthy adults consume at least 2 liters of water per day, assuming moderate environmental temperatures and medium levels of physical activity. Based on this guideline, I have set the daily water intake to 10 standard glasses, each with a capacity of 200 milliliters.
- HTML5
- CSS (SASS)
- JavaScript