-
Water Buddy
Inspiration
When people focus on work or studying, it can be easy to forget to take a water break. We created Water Buddy to make those reminders simple and easy to use.
What it does
Water Buddy is a browser app with a water break timer and a counter for glasses of water recorded during a session.
Users can choose a 15-, 30-, 45-, or 60-minute interval, then start, pause, resume, or stop the timer. When the countdown ends, an on-page reminder appears. Optional desktop notifications are available with browser permission.
Clicking “I Drank Water” adds one glass to the counter and starts the next countdown. A 10-second Demo Mode lets reviewers try the reminder quickly.
How we built it
We used HTML to structure the page, CSS to style the layout, and JavaScript to control the timer, water counter, and optional desktop notifications.
The app runs in a browser without an installation, account, or backend service.
Challenges we ran into
Coordinating the timer controls required careful attention. Starting, pausing, resuming, stopping, and recording water all need to keep the countdown and button states consistent.
Desktop notifications also depend on browser permission and support, so the app includes on-page reminders.
Accomplishments that we're proud of
We created a working app with adjustable reminder intervals, pause and resume controls, a water counter, and a quick demonstration mode.
We also included a layout that adapts to smaller screens, clear labels, and visible keyboard focus.
What we learned
This project helped us understand how HTML, CSS, and JavaScript work together to create an interactive website. We also learned about managing timer states and requesting permission for browser notifications.
What's next for Water Buddy
Possible improvements include saving progress between visits, letting users record water amounts, and adding customizable goals.
Currently, the timer and water counter reset when the page is refreshed or closed.
