say no to desease

• 

• 

  this is the about

• 

  this is where the user sign up

• 

  this is the main page

• 

• 

  i can check the hours i slept

• 

  i can add vitamines or medecines i want to take and check them

• 

  i can check the sport i practices

• 

  i can add another sport

Inspiration

Inspiration

Health is wealth — but in our busy lives, we often forget the basics: drinking water, sleeping well, taking our vitamins, or even noticing how we feel. We wanted to create a simple and beautiful web app that acts as a daily companion to track essential health habits in an enjoyable and engaging way.

We imagined something that even kids or older adults could use easily — no login walls, no confusion. Just simple, intuitive trackers for water intake, sleep, mood, medicines, and exercises, all in one place. What i Built

I built an interactive health-tracking website with:

💧 Water Tracker – click on 9 cups as you drink each glass

😴 Sleep Tracker – click 9 circles to log sleep hours

😊 Mood Tracker – click an emoji to reflect your mood; it gets bigger!

💊 Medicine Tracker – add your own medicine/vitamin list, mark them done, delete them

🏃 Exercise Tracker – see a checklist of 10 beginner-friendly exercises

📱 Fully responsive & aesthetic UI with animated buttons and themed sections

Challenges We Faced

Designing a UI that’s both aesthetic and functional

Implementing interactive trackers for health habits without external libraries

Managing state across sections (like saving user selections)

Making everything responsive and intuitive for users of all ages

What We Learned

DOM manipulation and dynamic element creation in vanilla JS

Better structuring of CSS for dark themes and animations

UX patterns for simple, motivational health tracking

Using GitHub Pages to quickly deploy a live app

Built With

• css
• html5
• javascript