Membuat Aplikasi Habit Tracker untuk Membangun Kebiasaan Baik

Dipublikasikan: Juli 2026

Habit tracker adalah web app produktivitas yang membantu pengguna membangun kebiasaan baru. Tutorial ini membuat tracker dengan streak, progress bar, dan penyimpanan lokal.

Fitur

Tambah kebiasaan baru
Checklist harian
Hitungan streak beruntun
Progress dalam persentase

Kode Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Habit Tracker</title>
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Segoe UI',Arial,sans-serif; background:#f0f2f5; padding:30px; }
    .container { max-width:600px; margin:0 auto; }
    h1 { text-align:center; color:#2d3436; margin-bottom:5px; }
    .subtitle { text-align:center; color:#636e72; margin-bottom:25px; font-size:14px; }
    .add-form { display:flex; gap:10px; margin-bottom:20px; }
    .add-form input { flex:1; padding:14px; border:2px solid #dfe6e9; border-radius:12px; font-size:15px; }
    .add-form input:focus { outline:none; border-color:#00b894; }
    .add-form button { padding:14px 24px; background:#00b894; color:#fff; border:none; border-radius:12px; cursor:pointer; font-size:15px; }
    .habits-list { display:flex; flex-direction:column; gap:12px; }
    .habit-card { background:#fff; border-radius:16px; padding:18px 20px; box-shadow:0 2px 10px rgba(0,0,0,0.06); display:flex; align-items:center; gap:15px; }
    .habit-check { width:28px; height:28px; border:3px solid #dfe6e9; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
    .habit-check.done { background:#00b894; border-color:#00b894; color:#fff; }
    .habit-info { flex:1; }
    .habit-name { font-weight:600; color:#2d3436; font-size:16px; }
    .habit-name.done-text { text-decoration:line-through; color:#b2bec3; }
    .habit-streak { font-size:12px; color:#b2bec3; margin-top:2px; }
    .habit-streak span { color:#e17055; font-weight:600; }
    .habit-progress { flex:0 0 100px; }
    .progress-bar { height:6px; background:#f0f0f0; border-radius:3px; overflow:hidden; }
    .progress-fill { height:100%; background:#00b894; border-radius:3px; transition:width 0.5s; }
    .progress-text { font-size:11px; color:#b2bec3; text-align:right; margin-top:2px; }
    .delete-btn { background:none; border:none; color:#b2bec3; cursor:pointer; font-size:18px; padding:5px; }
    .delete-btn:hover { color:#d63031; }
    .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:25px; }
    .stat-card { background:#fff; border-radius:14px; padding:16px; text-align:center; box-shadow:0 2px 10px rgba(0,0,0,0.06); }
    .stat-card .num { font-size:24px; font-weight:700; color:#6c5ce7; }
    .stat-card .label { font-size:11px; color:#b2bec3; margin-top:3px; }
    .empty { text-align:center; color:#b2bec3; padding:40px; }
  </style>
</head>
<body>
  <div class="container">
    <h1>âœ… Habit Tracker</h1>
    <div class="subtitle">Bangun kebiasaan baik setiap hari</div>
    <div class="stats">
      <div class="stat-card"><div class="num" id="totalHabits">0</div><div class="label">Total Kebiasaan</div></div>
      <div class="stat-card"><div class="num" id="doneToday">0</div><div class="label">Selesai Hari Ini</div></div>
      <div class="stat-card"><div class="num" id="bestStreak">0</div><div class="label">Streak Terbaik</div></div>
    </div>
    <div class="add-form">
      <input id="habitName" placeholder="Nama kebiasaan baru..." />
      <button onclick="addHabit()">Tambah</button>
    </div>
    <div class="habits-list" id="habitsList"></div>
  </div>
  <script>
    let habits = JSON.parse(localStorage.getItem('habits')) || [];
    function addHabit() {
      const name = document.getElementById('habitName').value.trim();
      if (!name) return alert('Masukkan nama kebiasaan');
      habits.push({ id:Date.now(), name, done:[], streak:0, bestStreak:0 });
      localStorage.setItem('habits', JSON.stringify(habits));
      document.getElementById('habitName').value = '';
      render();
    }
    function toggleHabit(id) {
      const h = habits.find(x => x.id === id);
      const today = new Date().toDateString();
      const idx = h.done.indexOf(today);
      if (idx >= 0) {
        h.done.splice(idx, 1);
        // recount streak
        let streak = 0;
        for (let d = new Date(); ; d.setDate(d.getDate()-1)) {
          if (h.done.includes(d.toDateString())) streak++;
          else break;
        }
        h.streak = streak;
      } else {
        h.done.push(today);
        h.streak++;
        if (h.streak > h.bestStreak) h.bestStreak = h.streak;
      }
      localStorage.setItem('habits', JSON.stringify(habits));
      render();
    }
    function deleteHabit(id) { habits = habits.filter(h => h.id !== id); localStorage.setItem('habits',JSON.stringify(habits)); render(); }
    function render() {
      const today = new Date().toDateString();
      document.getElementById('totalHabits').textContent = habits.length;
      document.getElementById('doneToday').textContent = habits.filter(h => h.done.includes(today)).length;
      document.getElementById('bestStreak').textContent = Math.max(...habits.map(h => h.bestStreak), 0);
      const list = document.getElementById('habitsList');
      if (habits.length === 0) { list.innerHTML = '<div class="empty">Belum ada kebiasaan. Tambahkan sekarang!</div>'; return; }
      list.innerHTML = habits.map(h => {
        const done = h.done.includes(today);
        const week = 7;
        const weekDone = h.done.filter(d => { const diff = (new Date() - new Date(d)) / (1000*60*60*24); return diff >= 0 && diff < week; }).length;
        const pct = Math.round((weekDone / week) * 100);
        return `
        <div class="habit-card">
          <div class="habit-check ${done?'done':''}" onclick="toggleHabit(${h.id})">${done?'âœ“':''}</div>
          <div class="habit-info">
            <div class="habit-name ${done?'done-text':''}">${h.name}</div>
            <div class="habit-streak">ðŸ”¥ Streak: <span>${h.streak} hari</span> Â· Best: ${h.bestStreak} hari</div>
          </div>
          <div class="habit-progress">
            <div class="progress-bar"><div class="progress-fill" style="width:${pct}%"></div></div>
            <div class="progress-text">${weekDone}/7 hari</div>
          </div>
          <button class="delete-btn" onclick="deleteHabit(${h.id})">Ã—</button>
        </div>`;
      }).join('');
    }
    render();
  </script>
</body>
</html>