Description
Habit Tracker – Build Better Habits Daily with Analytics & Calendar Heatmap
This Habit Tracker – Build Better Habits Daily with Analytics & Calendar Heatmap helps you build lasting routines by letting you add custom habits, mark daily completions, and visualize your progress—no backend required. Crafted in pure HTML5, CSS3, and vanilla JavaScript, it runs entirely in the browser and stores all data locally for instant access.
Key Features
- Custom Habits: Add, edit, and delete any habit on the fly.
- Calendar Heatmap: Color-coded view of your daily completion rates.
- Real-Time Analytics: Live streak counters and progress bars update instantly.
- LocalStorage Persistence: All data auto-saves in your browser—no signup needed.
- Responsive Design: Seamless experience on desktop and mobile.
How to Install
- Download or clone the project folder.
- Ensure index.html, styles.css, and script.js are in the same directory.
- Open index.html in any modern browser to start tracking.
How to Use
- 1. Enter a habit name in the “Add Habit” field and click “+”.
- 2. Click a day’s checkbox to mark it complete—heatmap and stats update live.
- 3. Edit or delete habits via the gear icon next to each entry.