21-Day Habit Tracker
This is a clean, lightweight 21-Day Habit Tracker built using only HTML, CSS, and JavaScript — all within a single file.
No external APIs, no databases, no frameworks — just pure front-end logic.
Perfect for beginners, students, or anyone wanting a simple tool to build better habits and track consistency!
🌟 Features:
✅ 100% Offline – Works directly in your browser
✅ No backend, no API, no internet required
✅ Save your habit name and track each of the 21 days
✅ Data stored using browser’s localStorage
✅ Simple UI with click-to-mark system
✅ One-click Reset option
✅ All code inside one single HTML file
✅ Lightweight, fast-loading, mobile-friendly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>21-Day Habit Tracker</title>
<style>
.container {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 20px;
background: #f0f8ff;
}
h1 {
color: #333;
}
input, button {
padding: 10px;
margin: 10px;
font-size: 16px;
}
.days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
margin-top: 20px;
}
.day {
border: 2px solid #ccc;
padding: 20px;
cursor: pointer;
user-select: none;
background: white;
border-radius: 8px;
transition: 0.3s;
}
.day.done {
background: #7fffd4;
color: #000;
border-color: #2e8b57;
}
.habit-name {
font-size: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>21-Day Habit Tracker</h1>
<input type="text" id="habitInput" placeholder="Enter your habit...">
<button onclick="startTracking()">Start Tracking</button>
<button onclick="resetTracker()">Reset</button>
<div class="habit-name" id="habitNameDisplay"></div>
<div class="days" id="daysContainer"></div>
</div>
<script>
const habitInput = document.getElementById('habitInput');
const habitNameDisplay = document.getElementById('habitNameDisplay');
const daysContainer = document.getElementById('daysContainer');
function startTracking() {
const habit = habitInput.value.trim();
if (habit === "") {
alert("Please enter a habit!");
return;
}
localStorage.setItem("habit", habit);
habitNameDisplay.textContent = "Habit: " + habit;
renderDays();
}
function renderDays() {
daysContainer.innerHTML = '';
let progress = JSON.parse(localStorage.getItem("progress")) || [];
for (let i = 1; i <= 21; i++) {
const day = document.createElement('div');
day.className = 'day' + (progress.includes(i) ? ' done' : '');
day.textContent = "Day " + i;
day.addEventListener('click', () => toggleDay(i));
daysContainer.appendChild(day);
}
}
function toggleDay(dayNumber) {
let progress = JSON.parse(localStorage.getItem("progress")) || [];
if (progress.includes(dayNumber)) {
progress = progress.filter(d => d !== dayNumber);
} else {
progress.push(dayNumber);
}
localStorage.setItem("progress", JSON.stringify(progress));
renderDays();
}
function resetTracker() {
if (confirm("Are you sure you want to reset?")) {
localStorage.removeItem("habit");
localStorage.removeItem("progress");
habitNameDisplay.textContent = "";
daysContainer.innerHTML = "";
habitInput.value = "";
}
}
// Auto load if data exists
window.onload = function() {
const savedHabit = localStorage.getItem("habit");
if (savedHabit) {
habitNameDisplay.textContent = "Habit: " + savedHabit;
renderDays();
}
};
</script>
</body>
</html>
