Habit Streak Tracker (GitHub Style)

Check off daily habits and visualize your 30-day streak in a heatmap style table just like GitHub.

CC CodesCompiler 📅 April 18, 2026

#javascript#heatmap#localStorage#app

Heatmaps are highly motivating! Let’s build a grid that tracks completion across 30 days.

Data Structure

let habits = JSON.parse(localStorage.getItem('habits')) || {
  "Drink Water": new Array(30).fill(false),
  "Read 10 Pages": new Array(30).fill(false)
};

function toggleDay(habit, dayIndex) {
  habits[habit][dayIndex] = !habits[habit][dayIndex];
  localStorage.setItem('habits', JSON.stringify(habits));
  renderGrid();
}

Check out the Live Demo to click the squares and watch them light up with colors based on your streak!