A beautiful, ADHD-friendly web application to track your goals and build lasting habits. Monitor how long you've been working on each goal with automatic day, hour, minute, and second tracking, plus motivational features to keep you going!
Created by @pastor0711
Try the app live at: https://pastor0711.github.io/adhd-habit-gamifier/
- Micro-achievements: Get rewarded every 5, 15, 30 minutes in your first hour!
- Hourly milestones: Progress tracked at 1hr, 3hr, 6hr, 12hr on day one
- 25+ unique badges: From 🌱 "Just Started" to 💯 "100 Days" and beyond
- Day-specific badges: Special achievements for days 1, 2, 3, 7, 14, 21, 30, 60, 100, 365
- Animated badges: Pulsing effects that catch your eye
- 6 color themes: Purple, Blue, Green, Orange, Red, and Teal for each goal
- Color-coded cards: Each goal has its own visual identity
- Sort options: View by Newest, Oldest, Longest Streak, or Shortest Streak
- Overall statistics: See total goals, active goals, total days, and longest streak
- Sound effects: Cheerful tones when you add goals or hit milestones (toggle on/off)
- Visual celebrations: Animated emojis pop up for milestone achievements
- Progress bars: Animated shimmer effects show your journey
- Motivational messages: Rotating encouraging quotes for every goal
- Notes feature: Journal your thoughts, feelings, or progress for each goal
- Pause/Resume: Life happens! Pause goals without losing your progress
- Best streak tracking: Your personal record is always visible
- Real-time updates: Numbers update every second so you see constant progress
- Big, bold numbers: 2.5rem gradient text that's impossible to miss
- Hover effects: Every element responds to interaction
- Clear hierarchy: Important info stands out
- Progress visualization: See exactly how close you are to the next milestone
- Reduced motion support: Respects accessibility preferences
- ✨ Unlimited Goals: Track as many goals as you want
- 🎨 Color Themes: Choose from 6 beautiful color gradients for new goals, and customize colors for existing goals
- ⏱️ Automatic Tracking: Days, hours, minutes, and seconds update in real-time
- ⏸️ Pause/Resume: Pause goals temporarily without losing progress
- 📝 Notes System: Add personal notes and reflections to each goal
- 🏆 Best Streak: Track your personal best for each goal
- 🔄 Smart Reset: Resets save your best streak automatically
- 🗑️ Delete Goals: Remove goals you no longer need
- 📊 Overall Stats: Dashboard showing total goals, active goals, and more
- 🔀 Sort Options: Organize by newest, oldest, longest, or shortest streak
- 🔊 Sound Effects: Optional audio feedback (can be toggled off)
- 🎉 Milestone Rewards: Celebrations and sounds at key achievements
- 💬 Personalized Messages: Unique motivational messages for each milestone
- 💾 Auto-Save: Everything is saved automatically using localStorage
- 📱 Fully Responsive: Optimized for desktop, tablet, and mobile
- 🌙 Dark Mode: Comfortable dark theme with softer colors and saved preference
- ♿ Accessible: Reduced motion support and clear visual hierarchy
- Open the App: Simply open
index.htmlin any modern web browser - Pick a Color: Select a color theme from the color picker
- Add a Goal: Type your goal name and click "Add Goal" or press Enter
- Watch It Track: The timer starts immediately and updates every second
- Change Colors: Click 🎨 Color to customize each goal's color theme
- Pause/Resume: Click ⏸️ Pause to temporarily stop tracking (perfect for breaks!)
- Add Notes: Click 📝 Notes to journal about your progress or feelings
- Reset: Click 🔄 Reset to start over (your best streak is saved!)
- Delete: Click 🗑️ Delete to remove a goal
- Sort Goals: Use the dropdown to sort by newest, oldest, longest, or shortest streak
- Dark Mode: Click 🌙 to toggle dark mode (preference is saved!)
- Toggle Sound: Click 🔊 to turn sound effects on or off
- View Stats: See your overall progress at the top of the page
- First Hour: Get badges every 5, 15, 30 minutes, then 1, 3, 6, 12 hours
- First Day: Hourly achievements up to 24 hours
- Long Term: Special badges at 1, 2, 3, 7, 14, 21, 30, 60, 100 days, and beyond!
- Pure JavaScript: No frameworks or dependencies required
- Local Storage: All data is stored in your browser's localStorage
- Real-time Updates: Timers update every second automatically
- Cross-browser Compatible: Works in all modern browsers
├── index.html # Main HTML structure
├── styles.css # All styling and animations
├── script.js # Application logic and functionality
└── README.md # This file
Your goals earn increasingly impressive badges as you progress:
First Hour (Minute-based):
- 🌱 Just Started! (0-5 min) - "Every journey begins with a single step! 🌟"
- 🌿 5+ Minutes! - "Great momentum! Keep that energy flowing! 💫"
- 🍀 15+ Minutes! - "You're building something amazing! 🌈"
- 🌳 30+ Minutes! - "Half an hour of dedication! You're unstoppable! ⚡"
- 💪 1+ Hour! - "An hour of focus! Your determination shines! ✨"
- 💫 3+ Hours! - "Three hours of commitment! You're a force! 🚀"
- ⭐ 6+ Hours! - "Six hours of dedication! You're incredible! 🌟"
- ✨ 12+ Hours! - "Half a day of consistency! You're amazing! 🎯"
Day 1-7:
- 🎯 1 Day! - "Your first full day! A beautiful beginning! 🌅"
- 🚀 2 Days! - "Two days strong! Your momentum is building! 💪"
- ⚡ 3 Days! - "Three days of dedication! You're on fire! 🔥"
- 💎 4-6 Days! - "Day X and still going! You're a diamond! 💎"
- 🌟 1 Week! - "One full week! You're building real habits! 🌟"
Week 2-4:
- 💎 8-13 Days! - "Day X and still going! You're a diamond! 💎"
- ⚡ 2 Weeks! - "Two weeks of consistency! You're electric! ⚡"
- 💎 15-20 Days! - "Day X and still going! You're a diamond! 💎"
- 🎆 3 Weeks! - "Three weeks! You're a celebration of consistency! 🎆"
- 👑 1 Month! - "One month of dedication! You're royalty! 👑"
Beyond:
- 🥈 2 Months! - "Two months of excellence! Silver medal worthy! 🥈"
- 💯 100 Days! - "100 DAYS! You're absolutely legendary! 💯"
- 👑 200+ Days LEGEND! - "Day X - you're a living legend! 👑"
- 🌟 365+ Days CHAMPION! - "Day X - you're an eternal champion! 🌟"
- 💪 Daily Exercise Streak
- 📚 Reading Every Day
- 🚭 Smoke-Free Days
- 💧 Staying Hydrated
- 🧘 Daily Meditation
- 💻 Learning to Code
- 🎨 Creative Projects
- 🌱 Plant Care
- 🏃 Running Routine
- 📝 Journaling
- 🎯 Any Personal Goal!
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Opera (latest)
Enjoy tracking your goals! 🚀