Membuat Aplikasi Countdown Timer untuk Event dan Deadline

Dipublikasikan: Juli 2026

Countdown timer sangat berguna untuk menghitung mundur menuju event spesial, deadline, atau momen penting. Tutorial ini membuat timer interaktif dengan input tanggal target.

Fitur

Pilih tanggal dan jam target
Hitung hari, jam, menit, detik
Tampilan animasi real-time
Pesan otomatis saat waktu tiba

Kode Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Countdown Timer</title>
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Segoe UI',Arial,sans-serif; background:linear-gradient(135deg,#0c0c1d,#1a1a3e); min-height:100vh; display:flex; justify-content:center; align-items:center; padding:20px; }
    .container { background:rgba(255,255,255,0.05); backdrop-filter:blur(10px); border-radius:24px; padding:40px; box-shadow:0 20px 60px rgba(0,0,0,0.5); width:100%; max-width:600px; text-align:center; border:1px solid rgba(255,255,255,0.1); }
    h1 { color:#fff; font-size:30px; margin-bottom:8px; }
    .subtitle { color:#8888aa; margin-bottom:30px; font-size:14px; }
    .input-row { display:flex; gap:12px; margin-bottom:30px; flex-wrap:wrap; justify-content:center; }
    .input-row input { padding:14px 18px; border:2px solid #2a2a4a; border-radius:12px; background:#0f0f23; color:#fff; font-size:16px; }
    .input-row input:focus { outline:none; border-color:#4a4ae0; }
    .input-row button { padding:14px 28px; background:#4a4ae0; color:#fff; border:none; border-radius:12px; cursor:pointer; font-size:16px; }
    .input-row button:hover { background:#5a5af0; }
    .timer { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin:30px 0; }
    .timer-block { background:rgba(255,255,255,0.05); border-radius:16px; padding:20px; }
    .timer-block .num { font-size:52px; font-weight:700; color:#4a4ae0; line-height:1; }
    .timer-block .label { font-size:14px; color:#8888aa; margin-top:8px; text-transform:uppercase; letter-spacing:2px; }
    .event-name { color:#fff; font-size:20px; margin-bottom:10px; }
    .message { color:#00b894; font-size:18px; display:none; margin-top:20px; }
  </style>
</head>
<body>
  <div class="container">
    <h1>â³ Countdown Timer</h1>
    <div class="subtitle">Hitung mundur menuju momen spesial Anda</div>
    <div class="input-row">
      <input id="eventName" placeholder="Nama event..." value="Tahun Baru" />
      <input id="targetDate" type="datetime-local" />
      <button onclick="startCountdown()">Mulai</button>
    </div>
    <div class="event-name" id="eventDisplay"></div>
    <div class="timer" id="timerDisplay">
      <div class="timer-block"><div class="num" id="days">00</div><div class="label">Hari</div></div>
      <div class="timer-block"><div class="num" id="hours">00</div><div class="label">Jam</div></div>
      <div class="timer-block"><div class="num" id="minutes">00</div><div class="label">Menit</div></div>
      <div class="timer-block"><div class="num" id="seconds">00</div><div class="label">Detik</div></div>
    </div>
    <div class="message" id="message">ðŸŽ‰ Waktu telah tiba!</div>
  </div>
  <script>
    let interval = null;
    function startCountdown() {
      const name = document.getElementById('eventName').value.trim() || 'Event';
      const target = document.getElementById('targetDate').value;
      if (!target) return alert('Pilih tanggal target');
      document.getElementById('eventDisplay').textContent = 'Menuju: ' + name;
      document.getElementById('message').style.display = 'none';
      if (interval) clearInterval(interval);
      const targetTime = new Date(target).getTime();
      interval = setInterval(() => {
        const now = new Date().getTime();
        const diff = targetTime - now;
        if (diff <= 0) {
          clearInterval(interval);
          document.getElementById('days').textContent = '00';
          document.getElementById('hours').textContent = '00';
          document.getElementById('minutes').textContent = '00';
          document.getElementById('seconds').textContent = '00';
          document.getElementById('message').style.display = 'block';
          return;
        }
        const d = Math.floor(diff / (1000*60*60*24));
        const h = Math.floor((diff % (1000*60*60*24)) / (1000*60*60));
        const m = Math.floor((diff % (1000*60*60)) / (1000*60));
        const s = Math.floor((diff % (1000*60)) / 1000);
        document.getElementById('days').textContent = String(d).padStart(2,'0');
        document.getElementById('hours').textContent = String(h).padStart(2,'0');
        document.getElementById('minutes').textContent = String(m).padStart(2,'0');
        document.getElementById('seconds').textContent = String(s).padStart(2,'0');
      }, 1000);
    }
    // Set default to 7 days from now
    const d = new Date(); d.setDate(d.getDate() + 7);
    document.getElementById('targetDate').value = d.toISOString().slice(0,16);
    startCountdown();
  </script>
</body>
</html>