Hai! Jika kalian ingin membuat aplikasi yang dapat menghitung mundur waktu atau Countdown Timer, maka kalian berada di tempat yang tepat. Dalam artikel ini, kita akan membahas langkah-langkah yang diperlukan untuk membuat Countdown Timer dengan menggunakan JavaScript. Tanpa perlu berlama-lama, mari kita mulai!
Apa itu Countdown Timer?
Countdown Timer adalah sebuah fungsi yang digunakan untuk menghitung mundur waktu hingga mencapai waktu tertentu. Fungsi ini dapat digunakan dalam berbagai aplikasi, seperti aplikasi e-commerce, penjualan, atau acara. Countdown Timer juga dapat menambah tampilan yang menarik dan lebih interaktif dalam sebuah website.
Langkah-langkah Membuat Countdown Timer dengan Javascript
Langkah-langkah yang diperlukan dalam membuat Countdown Timer dengan Javascript sebagai berikut:
- Buat sebuah file HTML baru, dan tambahkan elemen tombol yang akan digunakan untuk memulai Countdown Timer.
- Tambahkan sebuah elemen div yang akan menampilkan waktu yang tersisa.
- Buat sebuah file JavaScript yang akan menampilkan waktu yang tersisa pada elemen div yang telah dibuat.
- Tambahkan fungsi untuk menghitung waktu yang tersisa.
- Akhirnya, tambahkan CSS untuk memperindah tampilan countdown timer.
Langkah 1: Membuat File HTML
Pertama-tama, kita akan membuat file HTML yang akan digunakan untuk menampilkan Countdown Timer. Buatlah file HTML baru dengan nama “countdown.html”. Setelah itu, copy dan paste kode berikut:
<!DOCTYPE html><html><head><title>Countdown Timer</title></head><body><h1>Countdown Timer</h1><p>Klik tombol untuk memulai Countdown Timer.</p><button id="start">Mulai</button><div id="timer"></div><script src="countdown.js"></script></body></html>
Pada kode HTML di atas, kita telah menambahkan elemen h1 yang akan menampilkan judul Countdown Timer, elemen p yang akan memberikan instruksi kepada pengguna, elemen button dengan id “start” yang akan digunakan untuk memulai Countdown Timer, dan elemen div dengan id “timer” yang akan menampilkan waktu yang tersisa. Selain itu, kita juga telah menambahkan file JavaScript countdown.js yang akan mengatur Countdown Timer.
Langkah 2: Tambahkan Elemen Div untuk Menampilkan Waktu yang Tersisa
Setelah menambahkan elemen tombol pada file HTML, selanjutnya kita harus menambahkan elemen div yang akan menampilkan waktu yang tersisa. Tambahkan kode di bawah ini pada file HTML:
<div id="timer"></div>
Dengan menambahkan elemen div dengan id “timer”, Countdown Timer kita sudah siap untuk diimplementasikan menggunakan JavaScript.
Langkah 3: Buat File JavaScript Countdown
Setelah menambahkan elemen div yang akan menampilkan waktu yang tersisa, selanjutnya kita perlu membuat file JavaScript baru yang akan mengatur Countdown Timer. Buatlah file JavaScript baru dengan nama “countdown.js”. Setelah itu, copy dan paste kode berikut:
// Set the date we're counting down tovar countDownDate = new Date("Jan 1, 2023 00:00:00").getTime();// Update the count down every 1 secondvar x = setInterval(function() {// Get the current timevar now = new Date().getTime();// Find the distance between now and the count down datevar distance = countDownDate - now;// Time calculations for days, hours, minutes and secondsvar days = Math.floor(distance / (1000 * 60 * 60 * 24));var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));var seconds = Math.floor((distance % (1000 * 60)) / 1000);// Output the result in an element with id="timer"document.getElementById("timer").innerHTML = days + "d " + hours + "h "+ minutes + "m " + seconds + "s ";// If the count down is over, write some textif (distance < 0) {clearInterval(x);document.getElementById("timer").innerHTML = "EXPIRED";}}, 1000);
Pada kode di atas, kita telah menentukan waktu countdown dengan menggunakan variabel "countDownDate", dan menghitung waktu yang tersisa dari waktu sekarang dengan variabel "distance". Selain itu, kita juga telah menambahkan variabel "days", "hours", "minutes", dan "seconds" yang akan menampilkan waktu yang tersisa pada elemen div dengan id "timer". Akhirnya, jika waktu countdown sudah habis, kita akan menampilkan pesan "EXPIRED" pada elemen div "timer".
Langkah 4: Tambahkan Fungsi untuk Menghitung Waktu yang Tersisa
Setelah membuat file JavaScript Countdown, selanjutnya kita perlu menambahkan fungsi untuk menghitung waktu yang tersisa. Copy dan paste kode ini ke dalam file JavaScript "countdown.js":
// Set the date we're counting down tovar countDownDate = new Date("Jan 1, 2023 00:00:00").getTime();// Update the count down every 1 secondvar x = setInterval(function() {// Get the current timevar now = new Date().getTime();// Find the distance between now and the count down datevar distance = countDownDate - now;// Time calculations for days, hours, minutes and secondsvar days = Math.floor(distance / (1000 * 60 * 60 * 24));var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));var seconds = Math.floor((distance % (1000 * 60)) / 1000);// Output the result in an element with id="timer"document.getElementById("timer").innerHTML = days + "d " + hours + "h "+ minutes + "m " + seconds + "s ";// If the count down is over, write some textif (distance < 0) {clearInterval(x);document.getElementById("timer").innerHTML = "EXPIRED";}}, 1000);// Start the countdowndocument.getElementById("start").onclick = function() {x = setInterval(function() {// Get the current timevar now = new Date().getTime();// Find the distance between now and the count down datevar distance = countDownDate - now;// Time calculations for days, hours, minutes and secondsvar days = Math.floor(distance / (1000 * 60 * 60 * 24));var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));var seconds = Math.floor((distance % (1000 * 60)) / 1000);// Output the result in an element with id="timer"document.getElementById("timer").innerHTML = days + "d " + hours + "h "+ minutes + "m " + seconds + "s ";// If the count down is over, write some textif (distance < 0) {clearInterval(x);document.getElementById("timer").innerHTML = "EXPIRED";}}, 1000);};
Pada kode di atas, kita telah menambahkan event handler untuk tombol dengan id "start". Ketika tombol tersebut diklik, fungsi x akan dijalankan, dan waktu countdown akan dimulai.
Langkah 5: Tambahkan CSS untuk Memperindah Tampilan Countdown Timer
Setelah menambahkan file JavaScript Countdown, kita perlu menambahkan beberapa kode CSS agar Countdown Timer terlihat lebih menarik dan lebih mudah dibaca. Copy dan paste kode ini ke dalam file HTML:
<style>#timer {font-size: 72px;text-align: center;margin-top: 50px;margin-bottom: 50px;}#start {font-size: 24px;margin-top: 20px;margin-bottom: 20px;}body {font-family: Arial, sans-serif;}</style>
Pada kode di atas, kita telah menambahkan beberapa style pada Countdown Timer, seperti ukuran font, posisi tampilan, dan jenis font. Dengan menambahkan kode CSS ini, Countdown Timer kita akan terlihat lebih menarik dan lebih mudah dibaca.
Kesimpulan
Countdown Timer adalah salah satu fungsi yang penting dalam membuat sebuah website, terutama untuk aplikasi yang berhubungan dengan waktu. Membuat Countdown Timer dengan menggunakan JavaScript tidaklah sulit, asalkan kita mengikuti langkah-langkah yang telah dijelaskan pada artikel ini. Jadi, tunggu apa lagi? Coba buatlah Countdown Timer pada websitemu sendiri dan jangan lupa untuk membagikan pengalaman kamu pada kolom komentar.