Hydra-care

• 

  hydra-Care app

💧 Hydra Care Reminder

Inspiration

The inspiration behind Hydra Care comes from the busy lifestyle we lead today. Often, while working or studying for long hours, we forget the most basic necessity for our health—staying hydrated. I wanted to build a simple tool that acts as a personal health assistant to ensure we drink enough water throughout the day.

What it does

Hydra Care is a smart web application that allows users to set a custom timer. Once the time is up, the app: Triggers a loud audio alarm 🔊 to grab your attention. Displays a visual alert message ⏰ reminding you to drink water. Auto-stops the sound once the user acknowledges the reminder by clicking 'OK'.

How we built it

The project was built using a combination of web technologies: HTML5: Used for the structure, including the input fields and the audio player component. CSS3: To create a clean, water-themed UI with a centered container and responsive buttons. JavaScript: The "brain" of the app, which uses setInterval for the timer logic and controls the play() and pause() states of the audio file. Git/GitHub: For version control and managing the code repository.

Challenges we ran into

One of the main challenges was managing the Audio Autoplay Policy in modern browsers, which often block sounds from playing automatically. I solved this by ensuring the audio is triggered by a user interaction (clicking the "Start" button). Another challenge was the Git index lock error and merge conflicts during the push to GitHub, which I resolved using terminal commands like rm .git/index.lock and git pull --rebase.

Accomplishments that we're proud of

I am proud of creating a fully functional timer that doesn't just show a message but actually interacts with the user through sound. Successfully linking the local .mp3 file and getting the Git workflow correct after several attempts was a huge win for me!

** What we learned**

During this project, I learned: How to handle DOM elements and audio files in JavaScript. The importance of Relative Paths (using water.mp3 instead of a full C:/Users/... path). Advanced Git commands to fix errors like rejected pushes and locked files.

What's next for Hydra-care

In the future, I plan to add: Custom Sound Uploads: Let users choose their own alarm tone. Daily Stats: Track how many glasses of water the user has had in a day. Desktop Notifications: To remind users even when the browser tab is not active.

Built With

• css
• github
• golive
• html
• javascript