Water Intake Tracker

• 

  Interface Of Website

The Water Intake Tracker was born from a simple observation: staying hydrated is crucial for health, yet many of us struggle to track our daily water consumption consistently. I wanted to create an application that not only tracks water intake but makes the experience delightful and visually appealing through realistic 3D animations.

I built the project using HTML5, CSS3, and **Vanilla JavaScript_ without external dependencies. The application features a 3D realistic water bottle and glass created with CSS transforms, an auto-pour system, glass state management with persistence, sound effects using the Web Audio API, custom CSS popups, and a water-like gradient background.

The main challenges included creating convincing water effects using only CSS with multiple gradient layers and backdrop-filter for transparency, ensuring glass water level persistence across page refreshes using localStorage, and coordinating the bottle tilt, glass fill, and sound effects with precise timing. Through this project, I deepened my understanding of CSS 3D transforms, the Web Audio API, state management, and the importance of visual feedback in making mundane tasks engaging.

The reminder interval calculation follows the formula:

$$ T_{reminder} = \min\left(\max\left(\frac{V_{glass}}{4}, 30\right), 180\right) $$

Where ( T_{reminder} ) is the reminder interval in minutes and ( V_{glass} ) is the glass size in milliliters.**

Built With

• css3
• devin
• github
• html
• ide
• javascript