Here’s a complete gratitude tracker with visualization, built using HTML, CSS, and JavaScript. It allows users to enter daily gratitude entries and displays a calendar-style heatmap to visualize gratitude frequency.
🌟 Features:
-
Add gratitude entries by date
-
Visual heatmap to show gratitude intensity (frequency)
-
LocalStorage support to persist data
✅ Gratitude Tracker Code (HTML, CSS, JS)
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Gratitude Tracker</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f8fafc;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
color: #1d4ed8;
}
.tracker {
max-width: 700px;
margin: auto;
padding: 20px;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.form-group {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
input, textarea, button {
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
}
button {
background-color: #3b82f6;
color: white;
font-weight: bold;
cursor: pointer;
}
button:hover {
background-color: #2563eb;
}
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-top: 20px;
}
.day {
width: 40px;
height: 40px;
border-radius: 6px;
background-color: #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
text-align: center;
padding: 2px;
}
.low {
background-color: #dbeafe;
}
.medium {
background-color: #93c5fd;
}
.high {
background-color: #3b82f6;
color: white;
}
.legend {
margin-top: 15px;
display: flex;
gap: 10px;
justify-content: center;
}
.legend span {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>Gratitude Tracker</h1>
<div class="tracker">
<div class="form-group">
<label for="date">Date</label>
<input type="date" id="date" />
<label for="entry">What are you grateful for?</label>
<textarea id="entry" rows="3" placeholder="E.g., I'm grateful for my health..."></textarea>
<button onclick="addEntry()">Add Gratitude</button>
</div>
<div id="calendar" class="calendar"></div>
<div class="legend">
<div><span style="background:#dbeafe"></span> Low</div>
<div><span style="background:#93c5fd"></span> Medium</div>
<div><span style="background:#3b82f6"></span> High</div>
</div>
</div>
<script>
const calendar = document.getElementById("calendar");
let gratitudeData = JSON.parse(localStorage.getItem("gratitudeData")) || {};
function addEntry() {
const date = document.getElementById("date").value;
const entry = document.getElementById("entry").value.trim();
if (!date || !entry) return alert("Please enter both date and gratitude note.");
if (!gratitudeData[date]) {
gratitudeData[date] = [];
}
gratitudeData[date].push(entry);
localStorage.setItem("gratitudeData", JSON.stringify(gratitudeData));
document.getElementById("entry").value = "";
renderCalendar();
}
function getIntensity(count) {
if (count >= 5) return "high";
if (count >= 2) return "medium";
return "low";
}
function renderCalendar() {
calendar.innerHTML = "";
const today = new Date();
const start = new Date(today.getFullYear(), today.getMonth(), 1);
const end = new Date(today.getFullYear(), today.getMonth() + 1, 0);
const dayOffset = start.getDay();
for (let i = 0; i < dayOffset; i++) {
const emptyDiv = document.createElement("div");
calendar.appendChild(emptyDiv);
}
for (let day = 1; day <= end.getDate(); day++) {
const dateStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
const entryCount = (gratitudeData[dateStr] || []).length;
const div = document.createElement("div");
div.classList.add("day");
div.innerText = day;
if (entryCount > 0) {
div.classList.add(getIntensity(entryCount));
div.title = gratitudeData[dateStr].join("n");
}
calendar.appendChild(div);
}
}
renderCalendar();
</script>
</body>
</html>
Would you like this tracker embedded into a blog post or expanded with export/share functionality?
Share this Page your favorite way: Click any app below to share.