Membuat Aplikasi Kalkulator Waktu Mundur (Countdown Event) dengan JavaScript

Countdown event adalah penghitung waktu mundur menuju tanggal atau momen tertentu, misalnya:

• Tahun Baru,

• Hari Ulang Tahun,

• Peluncuran Produk,

• atau Event Spesial lainnya.

Fitur ini sering digunakan di landing page, halaman coming soon, atau event reminder. Dengan JavaScript, kita bisa membuat countdown yang real-time, dinamis, dan mudah disesuaikan.

Struktur HTML Dasar Countdown

Kita mulai dengan HTML sederhana:

<div class="countdown-container">
  <h1>Countdown Menuju Tahun Baru </h1>
  <div id="countdown">
    <div><span id="days">00</span><p>Hari</p></div>
    <div><span id="hours">00</span><p>Jam</p></div>
    <div><span id="minutes">00</span><p>Menit</p></div>
    <div><span id="seconds">00</span><p>Detik</p></div>
  </div>
</div>

CSS untuk Tampilan Countdown

Agar tampil menarik dan modern:

body {
  font-family: "Poppins", sans-serif;
  background: linear-gradient(135deg, #007bff, #00c6ff);
  color: white;
  text-align: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.countdown-container {
  background: rgba(255, 255, 255, 0.1);
  padding: 40px 60px;
  border-radius: 15px;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

#countdown {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 20px;
}

#countdown div {
  font-size: 1.8em;
}

#countdown span {
  font-size: 3em;
  font-weight: bold;
  display: block;
}

JavaScript: Logika Countdown

Berikut skrip JavaScript untuk menghitung waktu mundur secara real-time:

// Tentukan tanggal tujuan (misal: Tahun Baru)
const targetDate = new Date("Jan 1, 2026 00:00:00").getTime();

const countdown = setInterval(() => {
  const now = new Date().getTime();
  const distance = targetDate - now;

  // Hitung waktu
  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Tampilkan hasil ke elemen HTML
  document.getElementById("days").textContent = days.toString().padStart(2, '0');
  document.getElementById("hours").textContent = hours.toString().padStart(2, '0');
  document.getElementById("minutes").textContent = minutes.toString().padStart(2, '0');
  document.getElementById("seconds").textContent = seconds.toString().padStart(2, '0');

  // Jika waktu habis
  if (distance < 0) {
    clearInterval(countdown);
    document.querySelector(".countdown-container").innerHTML = "<h1> Selamat Tahun Baru! </h1>";
  }
}, 1000);

Cara Kerja Countdown

1. Ambil tanggal target menggunakan new Date().

2. Hitung selisih waktu antara targetDate dan waktu saat ini (now).

3. Ubah selisih menjadi hari, jam, menit, dan detik.

4. Tampilkan ke halaman menggunakan textContent.

5. Setiap detik (setInterval), hitungan diperbarui secara otomatis.

Membuat Countdown Dinamis

Kamu bisa menjadikan countdown ini dinamis agar pengguna bisa memasukkan tanggal event sendiri.

<input type="datetime-local" id="eventDate">
<button id="startCountdown">Mulai Countdown</button>
<div id="output"></div>

<script>
document.getElementById("startCountdown").addEventListener("click", function() {
  const inputDate = new Date(document.getElementById("eventDate").value).getTime();
  const output = document.getElementById("output");

  if (!inputDate) {
    output.innerHTML = "<p>⚠️ Silakan pilih tanggal terlebih dahulu!</p>";
    return;
  }

  const countdown = setInterval(() => {
    const now = new Date().getTime();
    const distance = inputDate - now;

    if (distance < 0) {
      clearInterval(countdown);
      output.innerHTML = "<h2> Event Dimulai!</h2>";
      return;
    }

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    output.innerHTML = `
      <h2>Sisa Waktu:</h2>
      <p>${days} Hari ${hours} Jam ${minutes} Menit ${seconds} Detik</p>
    `;
  }, 1000);
});
</script>

Dengan versi ini, pengguna dapat memilih tanggal apa pun, dan sistem akan otomatis menghitung mundur menuju waktu tersebut.

Ide Pengembangan Countdown

Kamu bisa mempercantik atau memperluas fitur dengan:

Efek suara ketika waktu habis.

Animasi konfeti atau transisi saat event dimulai.

Input multiple events (misalnya daftar ulang tahun teman).

Desain responsif agar tampil bagus di mobile.

Kesimpulan

Membuat countdown event dengan JavaScript sangat mudah namun hasilnya menarik dan profesional. Dengan logika waktu yang sederhana, kamu bisa menambahkan fitur ini ke berbagai aplikasi seperti:

• Website acara atau seminar,

• Halaman coming soon produk,

• Pengingat event pribadi.

Cukup dengan JavaScript murni, HTML, dan CSS, kamu sudah bisa membuat kalkulator waktu mundur yang interaktif dan keren!