Pernahkah terpikir untuk membuat sebuah jam digital yang berjalan langsung di halaman web? Proyek ini bukan hanya menarik, tetapi juga sangat cocok untukmu yang baru mulai belajar web programming.
Membuat jam digital dengan JavaScript adalah cara yang tepat untuk memahami dasar-dasar pemrograman, manipulasi DOM, serta cara menampilkan waktu secara dinamis di browser.
Dalam tutorial ini, kami akan membimbingmu melalui setiap langkah untuk menampilkan jam digital menggunakan script pada JavaScript yang mudah diikuti.
Menyiapkan File dan Struktur HTML
Langkah pertama dalam tutorial membuat jam digital adalah menyiapkan struktur HTML untuk menampilkan time atau waktu di halaman web.
Di sini, kita akan membuat elemen HTML untuk menampilkan waktu dalam format digital.
Contoh di bawah ini menunjukan bagaimana cara membuat wadah untuk digital clock di halaman:
<div id=”digital-clock”></div>
Elemen HTML ini akan berinteraksi dengan JavaScript untuk menampilkan waktu yang terus diperbarui.
Dengan cara ini, kamu dapat menampilkan jam dalam format digital di halaman website. Struktur ini sederhana namun sangat penting sebagai dasar proyek coding.
Baca Juga: HTML adalah Bahasa Markup Website dan Berikut Fungsinya
Menulis Kode JavaScript untuk Jam Digital
JavaScript adalah kunci utama dalam proyek ini karena berfungsi untuk menampilkan waktu yang dinamis.
Kode berikut menunjukkan cara membuat fungsi untuk mendapatkan waktu saat ini menggunakan Date() di JavaScript:
function updateClock() {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
hours = (hours < 10) ? ‘0’ + hours : hours;
minutes = (minutes < 10) ? ‘0’ + minutes : minutes;
seconds = (seconds < 10) ? ‘0’ + seconds : seconds;
document.getElementById(‘digital-clock’).innerHTML = `${hours}:${minutes}:${seconds}`;
}
setInterval(updateClock, 1000);
Dengan contoh di atas, kamu dapat membuat waktu yang ditampilkan di halaman web secara real-time.
Fungsi setInterval() memastikan bahwa waktu diperbarui setiap detik, jadi jam digital akan selalu menunjukkan waktu yang tepat.
Styling Jam Digital dengan CSS
Setelah berhasil membuat jam digital, tentu kamu ingin tampilannya lebih menarik, bukan? Menggunakan CSS, kamu dapat menambahkan gaya pada digital clock untuk memberikan tampilan yang lebih elegan.
Contoh styling CSS di bawah ini menunjukkan bagaimana membuat jam digital tampil lebih rapi di browser:
#digital-clock {
font-family: ‘Arial’, sans-serif;
font-size: 48px;
color: #333;
text-align: center;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
}
Dengan menggunakan gaya di atas, jam digitalmu akan terlihat modern dan sesuai dengan desain website yang lebih profesional.
Menambahkan Fitur Tambahan
Secara default, JavaScript menggunakan format 24 jam, namun kamu bisa dengan mudah mengubahnya agar sesuai dengan format 12 jam.
Perbedaan utama antara format 24 jam dan 12 jam adalah pada cara penunjukkan jam setelah tengah hari. Format 24 jam menampilkan jam dari 00 hingga 23.
Sedangkan format 12 jam hanya menampilkan jam dari 1 hingga 12, dengan penanda AM (Ante Meridiem) untuk waktu pagi dan PM (Post Meridiem) untuk waktu sore.
Untuk mengonversi jam ke format 12 jam, kamu dapat menyesuaikan kode JavaScript seperti berikut:
function updateClock() {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
let ampm = hours >= 12 ? ‘PM’ : ‘AM’;
hours = hours % 12;
hours = hours ? hours : 12; // Adjust for 0 hour
minutes = (minutes < 10) ? ‘0’ + minutes : minutes;
seconds = (seconds < 10) ? ‘0’ + seconds : seconds;
document.getElementById(‘digital-clock’).innerHTML = `${hours}:${minutes}:${seconds} ${ampm}`;
}
setInterval(updateClock, 1000);
Dengan kode di atas, jam digital akan menampilkan waktu dalam format 12 jam lengkap dengan AM/PM yang memberikan tampilan yang lebih familiar bagi banyak orang.
Menyimpan Kode dalam File Eksternal
Agar lebih terstruktur dan mudah dipelihara, kamu dapat menyimpan kode JavaScript dan CSS dalam file eksternal.
Misalnya, dengan menyimpan kode CSS dalam file style.css dan kode JavaScript dalam file script.js. Berikut adalah contoh cara menghubungkan file eksternal ke dalam HTML:
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<script src=”script.js”></script>
Dengan cara ini, kamu memisahkan tampilan (CSS) dan fungsionalitas (JavaScript) dari HTML dan membuat kode lebih terorganisir.
Membuat Jam Digital dengan JavaScript
Melalui langkah-langkah yang telah dijelaskan, kamu telah belajar cara membuat jam digital yang dapat berjalan langsung di halaman web, serta cara menambahkan fitur tambahan seperti format waktu 12 jam dan AM/PM.
Kamu dapat melangkah lebih jauh dengan menambahkan fitur-fitur baru seperti jam analog, alarm, atau pengatur waktu mundur.
Jika kamu ingin mendalami pemrograman web lebih lanjut, kursus web developer online dari IT-Box adalah pilihan yang tepat. Di IT-Box, kamu bisa belajar dengan fleksibel dan selalu up-to-date untuk menjadi seorang developer handal.
Yuk, belajar web developer online bersama IT-Box sekarang!
FAQ
1. Apa bedanya jam digital dengan jam analog dalam hal JavaScript?
Jam digital menampilkan waktu dalam format angka yang mudah dimanipulasi menggunakan JavaScript, sedangkan jam analog menggunakan jarum untuk menunjukkan waktu yang memerlukan teknik grafis lebih lanjut.
2. Apakah saya bisa menambahkan pengaturan zona waktu dalam jam digital ini?
Ya, kamu bisa menambahkan pengaturan zona waktu dengan menggunakan metode toLocaleTimeString() di JavaScript, yang memungkinkan penyesuaian waktu sesuai dengan zona waktu tertentu.
3. Bagaimana cara memperbaiki tampilan jam agar lebih responsif di perangkat mobile?
Kamu dapat menggunakan media queries di CSS untuk membuat tampilan jam digital lebih responsif di perangkat mobile. Dengan cara ini, ukuran dan tata letak jam dapat menyesuaikan diri dengan layar perangkat yang lebih kecil.
