Latest Addition: You can now view it online at https://codepen.io/nikczemnydev/pen/qBvVmab
HTML, CSS, Vanilla JavaScript - HydrationTracker - Daily Water Drinking Tracker. HydrationTracker is a simple and effective web app product designed to help users stay hydrated by tracking their daily water intake. It features the following components:
Cups Cup Tracker: The main interface displays eight cups, each representing 250ml of water. Users can click on a cup to mark it as consumed, keeping track of their progress throughout the day.
Jug 2L Jug: A prominent 2-liter jug visually represents the overall goal. As users fill the cups, the jug gradually fills up, providing a satisfying visual indicator of their hydration level. Stay refreshed and healthy with HydrationTracker! 💧🌊
What it looks like(please keep in mind the limitations of the GIF format):
- Download index.html, style.css and script.js files.
- Put all 3 of them in the same folder (I know it's good practice to use subfolders - I kept it this way for ease of use, which is also why I linked photos online as opposed to local pics.)
- Click index.html, it should open in your browser, if it doesn't (maybe because your default .html program is a text/code editor) then drag the index.html file and drop it in your browser window.