Project 15: Habit Tracker (GitHub Style)

📋 Project Brief

Build a 365-day visual habit tracker inspired by GitHub's contribution graph. This project requires programmatic SVG generation, date mathematics (leap years, day-of-week offsets), and intensity-based color mapping.

✅ Feature Requirements

Feature 1: SVG Grid Generation

Acceptance Criteria:

• Generate a grid of 365 (or 366) <rect> elements representing each day of the year
• Layout: 7 rows (Mon-Sun) × 52-53 columns (weeks)
• Each cell is ~12×12px with 2px gap
• Month labels appear above the grid at the correct column positions
• Day labels (Mon, Wed, Fri) appear on the left side

Feature 2: Intensity Color Mapping

Acceptance Criteria:

• 0 habits = lightest gray; 1 = light green; 2-3 = medium green; 4+ = dark green
• Color scale must be customizable (e.g., blue theme, orange theme)
• A legend at the bottom shows: "Less" [□ □ □ □ □] "More"

Feature 3: Date Math Logic

Acceptance Criteria:

• Correctly handle leap years (366 days)
• The grid starts on the correct day-of-week for January 1st
• Today's date is visually highlighted with a border
• Future dates are not clickable/interactive

Feature 4: Tooltip System

Acceptance Criteria:

• Hovering over a cell shows: date, number of habits completed, and habit names
• The tooltip follows the cursor or anchors to the cell
• Tooltip must not overflow the viewport edges

Feature 5: Yearly Comparison

Acceptance Criteria:

• A year selector dropdown allows viewing previous years
• A "Year in Review" summary shows: total active days, longest streak, most productive month
• Side-by-side comparison mode to view two years simultaneously

📊 Data Model

Field	Type	Description
date	YYYY-MM-DD string	The day
habits	Array of strings	Habit names completed that day
count	Number	Total habits completed (derived)

🧪 Testing Checklist

• Unit test: leap year detection
• Unit test: day-of-week calculation for January 1st of any year
• Unit test: color intensity mapping from count to color
• Unit test: streak calculation (consecutive days with count > 0)
• Integration test: clicking a day toggles a habit and updates the grid color

🚀 Stretch Goals

• Add multiple habit categories with separate color themes
• Implement daily notifications/reminders
• Add a "Share Your Year" image export
• Weekly and monthly summary views