Membuat Countdown Page dengan HTML, CSS DAN JAVASCRIPT

Pendahuluan

Halaman hitung mundur (countdown page) adalah halaman web yang menampilkan hitungan mundur hingga suatu tanggal atau waktu tertentu. Halaman ini sering digunakan untuk mempromosikan acara mendatang, peluncuran produk baru, atau penjualan khusus. Dalam artikel ini, kita akan membahas cara membuat halaman hitung mundur dengan desain yang cantik menggunakan HTML, CSS, dan JavaScript.

Langkah 1: Menyiapkan HTML

Pertama-tama, kita perlu membuat file HTML baru dan menambahkan kode berikut:

<!DOCTYPE html>
<html>
<head>
  <title>Halaman Hitung Mundur</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="countdown">
    <div class="days">00</div>
    <div class="hours">00</div>
    <div class="minutes">00</div>
    <div class="seconds">00</div>
  </div>

  <script src="script.js"></script>
</body>
</html>

Kode HTML ini membuat struktur dasar halaman hitung mundur. Elemen <div id="countdown"> adalah wadah untuk hitungan mundur, sedangkan elemen <div class="days">, <div class="hours">, <div class="minutes">, dan <div class="seconds"> adalah wadah untuk masing-masing bagian hitungan mundur (hari, jam, menit, dan detik).

Langkah 2: Menambahkan CSS

Selanjutnya, kita perlu menambahkan kode CSS berikut ke file style.css:

#countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #222;
  color: #fff;
  font-family: sans-serif;
}

.days, .hours, .minutes, .seconds {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #333;
  color: #fff;
  font-size: 36px;
}

Kode CSS ini mengatur gaya halaman hitung mundur. Elemen <div id="countdown"> diberi gaya sebagai wadah fleksibel yang berpusat secara horizontal dan vertikal, dengan lebar dan tinggi 100% dari viewport. Elemen <div class="days">, <div class="hours">, <div class="minutes">, dan <div class="seconds"> diberi gaya sebagai wadah fleksibel yang berpusat secara horizontal dan vertikal, dengan lebar dan tinggi 100 piksel, margin 10 piksel, dan latar belakang berwarna #333.

Langkah 3: Menambahkan JavaScript

Terakhir, kita perlu menambahkan kode JavaScript berikut ke file script.js:

const countdownDate = new Date("2023-01-01T00:00:00");

const daysElement = document.querySelector(".days");
const hoursElement = document.querySelector(".hours");
const minutesElement = document.querySelector(".minutes");
const secondsElement = document.querySelector(".seconds");

const updateCountdown = () => {
  const now = new Date();
  const timeLeft = countdownDate - now;

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

  daysElement.textContent = days.toString().padStart(2, "0");
  hoursElement.textContent = hours.toString().padStart(2, "0");
  minutesElement.textContent = minutes.toString().padStart(2, "0");
  secondsElement.textContent = seconds.toString().padStart(2, "0");
};

setInterval(updateCountdown, 1000);

Kode JavaScript ini mengatur hitungan mundur. Fungsi updateCountdown() menghitung waktu yang tersisa hingga tanggal dan waktu hitungan mundur, lalu memperbarui elemen HTML yang sesuai dengan nilai waktu yang tersisa. Fungsi ini dipanggil setiap detik menggunakan setInterval().

Hasil Akhir

Setelah mengikuti langkah-langkah di atas, Anda akan memiliki halaman hitung mundur. Anda dapat menyesuaikan desain halaman hitung mundur dengan mengubah kode CSS, dan Anda dapat mengubah tanggal dan waktu hitungan mundur dengan mengubah nilai variabel countdownDate.

Blog

Membuat Countdown Page dengan HTML, CSS DAN JAVASCRIPT

Muhammad Hanif

Pendahuluan

Langkah 1: Menyiapkan HTML

Langkah 2: Menambahkan CSS

Langkah 3: Menambahkan JavaScript

Hasil Akhir

Join Our Newsletter. No Spam, Only the good stuff.

Related