What Was Built ? A fully-featured, single-page habit tracker web app with a premium dark UI.
File Description index.html Full app layout — sidebar, 4 views, 2 modals style.css Complete design system — dark theme, gradients, animations app.js All logic — CRUD, streaks, heatmap, stats, localStorage
🛠️ Built With TechnologyPurposeHTML5App structure & semantic markupCSS3Design system animations responsive layoutVanilla JavaScriptState management logic DOM updateslocalStorage APIPersistent data storageCanvas APIConfetti celebration animationCSS Custom PropertiesTheming & design tokens
Features Implemented Add / Edit / Delete Habits — modal with name, description, category (6 types), 6 color choices, frequency (daily/weekdays/weekends), optional reminder time Daily Check-In — one-click habit completion with animated checkmark; confetti + toast on 100% day Progress Ring — live animated SVG donut chart showing daily % completion Streak Tracking — current streak and best streak per habit, global streak badge in sidebar Filter Tabs — filter today's habits by All / Pending / Done Statistics View — 4 stat cards (best streak, total completions, avg rate, habit count) + per-habit performance bars History View — 15-week activity heatmap + daily completion log for last 14 days All Habits Grid — card view with per-habit 30-day completion chart LocalStorage Persistence — all data survives page refresh Responsive Design — collapsible sidebar on mobile Animations — page transitions, ring animation, confetti canvas, toast slide-in, micro-hover effects
🎯 Habit Categories Emoji Category 💪 Health 🧠 Mind ⚡ Productivity 🤝 Social 💰 Finance 🎨 Creative