Membuat jam digital menggunakan HTML, CSS, dan JavaScript merupakan salah satu proyek sederhana yang sangat cocok untuk pemula yang sedang belajar pemrograman web. Selain mudah dipahami, proyek ini membantu Anda mengenal konsep dasar JavaScript seperti manipulasi DOM, penggunaan fungsi, objek Date, hingga pembaruan data secara real-time.

Dengan mengikuti tutorial ini, Anda akan dapat membuat jam digital yang menampilkan waktu secara otomatis tanpa perlu me-refresh halaman. Proyek ini juga dapat dijadikan sebagai latihan sebelum mempelajari proyek JavaScript yang lebih kompleks.

Mengapa Belajar Membuat Jam Digital?

Meskipun terlihat sederhana, proyek jam digital memiliki banyak manfaat bagi pemula.

Beberapa manfaatnya antara lain:

Memahami cara kerja JavaScript secara real-time.
Belajar menggunakan objek Date.
Mengenal fungsi setInterval().
Memahami manipulasi elemen HTML menggunakan DOM.
Melatih logika pemrograman dasar.

Karena alasan tersebut, jam digital sering dijadikan proyek pertama saat belajar JavaScript.

Persiapan Sebelum Memulai

Sebelum membuat program, pastikan Anda telah menyiapkan beberapa hal berikut.

Visual Studio Code
Browser (Google Chrome, Microsoft Edge, atau Firefox)
Pengetahuan dasar HTML
Pengetahuan dasar CSS
Pengetahuan dasar JavaScript

Kemudian buat folder proyek dengan struktur berikut.

jam-digital/
│
├── index.html
├── style.css
└── script.js

Langkah 1: Membuat Struktur HTML

Buka file index.html lalu tuliskan kode berikut.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jam Digital</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="clock">
    <h1 id="jam">00:00:00</h1>
</div>

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

</body>
</html>

Penjelasan

Pada kode di atas terdapat elemen dengan id=”jam” yang nantinya akan diisi oleh JavaScript sesuai waktu saat ini.

Langkah 2: Membuat Tampilan dengan CSS

Buka file style.css.

body{
    margin:0;
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    background:#0f172a;
    font-family:Arial, sans-serif;
}

.clock{
    background:#1e293b;
    padding:40px 70px;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.4);
}

.clock h1{
    color:#38bdf8;
    font-size:60px;
    letter-spacing:4px;
}

Hasil

Setelah dijalankan, halaman akan menampilkan sebuah kotak dengan tulisan 00:00:00 di tengah layar.

Namun jam tersebut belum bergerak karena kita belum menambahkan JavaScript.

Langkah 3: Menambahkan JavaScript

Sekarang buka file script.js.

function tampilJam(){

let sekarang = new Date();

let jam = sekarang.getHours();

let menit = sekarang.getMinutes();

let detik = sekarang.getSeconds();

jam = String(jam).padStart(2,"0");

menit = String(menit).padStart(2,"0");

detik = String(detik).padStart(2,"0");

document.getElementById("jam").innerHTML =
jam + ":" + menit + ":" + detik;

}

setInterval(tampilJam,1000);

tampilJam();

Penjelasan Kode JavaScript

Mari kita pahami setiap bagian dari kode tersebut.

1. Membuat Objek Date

let sekarang = new Date();

Kode ini digunakan untuk mengambil tanggal dan waktu dari komputer pengguna.

2. Mengambil Jam

let jam = sekarang.getHours();

Mengambil nilai jam saat ini.

3. Mengambil Menit

let menit = sekarang.getMinutes();

Mengambil nilai menit.

4. Mengambil Detik

let detik = sekarang.getSeconds();

Mengambil nilai detik.

5. Menambahkan Angka Nol

String(jam).padStart(2,"0");

Jika jam masih satu digit, misalnya 8, maka akan berubah menjadi 08.

6. Menampilkan ke HTML

document.getElementById("jam").innerHTML =
jam + ":" + menit + ":" + detik;

Kode ini mengubah isi elemen HTML sehingga waktu selalu diperbarui.

7. Memperbarui Setiap Detik

setInterval(tampilJam,1000);

Artinya fungsi akan dijalankan setiap 1000 milidetik atau 1 detik.

Hasil Program

Jika seluruh kode telah dijalankan, maka tampilan akan menjadi seperti berikut.

14:35:28

Setiap detik angka akan berubah secara otomatis mengikuti waktu pada komputer.

Cara Kerja Program

Secara sederhana, alur kerja program adalah sebagai berikut.

Browser membuka halaman HTML.
CSS mempercantik tampilan jam.
JavaScript mengambil waktu saat ini.
JavaScript menampilkan waktu ke halaman.
Fungsi dijalankan kembali setiap satu detik.
Jam terus diperbarui secara otomatis.

Menambahkan Tanggal

Selain jam, Anda juga dapat menampilkan tanggal.

Contohnya:

let tanggal = sekarang.getDate();

let bulan = sekarang.getMonth()+1;

let tahun = sekarang.getFullYear();

console.log(tanggal + "/" + bulan + "/" + tahun);

Output:

05/07/2026

Menambahkan Nama Hari

JavaScript juga dapat menampilkan nama hari.

const hari = [

"Minggu",

"Senin",

"Selasa",

"Rabu",

"Kamis",

"Jumat",

"Sabtu"

];

console.log(hari[sekarang.getDay()]);

Output

Sabtu

Membuat Tampilan Lebih Menarik

Agar jam digital terlihat lebih profesional, Anda dapat menambahkan beberapa fitur berikut.

Efek bayangan (Shadow)
Background gradient
Font digital
Animasi berkedip
Menampilkan tanggal
Menampilkan nama hari
Mode terang dan gelap (Dark Mode)
Ikon jam
Efek transisi

Semua fitur tersebut dapat dikembangkan menggunakan CSS dan JavaScript.

Kesalahan yang Sering Dilakukan Pemula

Saat membuat jam digital, beberapa kesalahan berikut sering terjadi.

Salah menulis nama file

Pastikan file HTML memanggil file CSS dan JavaScript dengan nama yang benar.

Salah menulis ID HTML

Misalnya pada HTML:

<h1 id="jam"></h1>

Maka di JavaScript juga harus menggunakan:

document.getElementById("jam")

Jika berbeda, jam tidak akan tampil.

Tidak Memanggil JavaScript

Pastikan bagian bawah HTML terdapat kode berikut.

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

Lupa Menjalankan Fungsi Pertama Kali

Selain menggunakan setInterval(), panggil juga fungsi sekali di awal.

tampilJam();

Tanpa kode tersebut, pengguna harus menunggu satu detik sebelum jam muncul.

Tips Belajar JavaScript Melalui Proyek Jam Digital

Supaya kemampuan Anda semakin berkembang, cobalah mengembangkan proyek ini menjadi lebih menarik.

Beberapa ide yang bisa dicoba:

Tambahkan format 12 jam (AM/PM).
Tampilkan tanggal lengkap.
Tambahkan ikon cuaca.
Buat tema gelap dan terang.
Tambahkan efek animasi saat angka berubah.
Gunakan font digital agar tampil lebih realistis.

Dengan terus berlatih, Anda akan semakin memahami konsep JavaScript dan siap membuat proyek web yang lebih kompleks.

Kesimpulan

Cara membuat jam digital menggunakan HTML, CSS, dan JavaScript merupakan salah satu latihan terbaik bagi pemula untuk memahami dasar-dasar pengembangan web. Melalui proyek sederhana ini, Anda dapat belajar membuat struktur halaman dengan HTML, mempercantik tampilan menggunakan CSS, serta menambahkan logika interaktif melalui JavaScript.

Selain itu, Anda juga mempelajari penggunaan objek Date, manipulasi DOM, dan fungsi setInterval() yang sangat sering digunakan dalam pengembangan aplikasi web modern. Setelah menguasai proyek ini, Anda dapat mengembangkannya menjadi jam digital dengan tanggal, nama hari, mode gelap, hingga tampilan yang lebih profesional.

Cara Membuat Jam Digital Menggunakan HTML, CSS, dan JavaScript

Mengapa Belajar Membuat Jam Digital?

Persiapan Sebelum Memulai

Langkah 1: Membuat Struktur HTML

Penjelasan

Langkah 2: Membuat Tampilan dengan CSS

Hasil

Langkah 3: Menambahkan JavaScript

Penjelasan Kode JavaScript

1. Membuat Objek Date

2. Mengambil Jam

3. Mengambil Menit

4. Mengambil Detik

5. Menambahkan Angka Nol

6. Menampilkan ke HTML

7. Memperbarui Setiap Detik

Hasil Program

Cara Kerja Program

Menambahkan Tanggal

Menambahkan Nama Hari

Membuat Tampilan Lebih Menarik

Kesalahan yang Sering Dilakukan Pemula

Salah menulis nama file

Salah menulis ID HTML

Tidak Memanggil JavaScript

Lupa Menjalankan Fungsi Pertama Kali

Tips Belajar JavaScript Melalui Proyek Jam Digital

Kesimpulan

Leave a Reply Cancel reply

Cara Membuat Jam Digital Menggunakan HTML, CSS, dan JavaScript

Mengapa Belajar Membuat Jam Digital?

Persiapan Sebelum Memulai

Langkah 1: Membuat Struktur HTML

Penjelasan

Langkah 2: Membuat Tampilan dengan CSS

Hasil

Langkah 3: Menambahkan JavaScript

Penjelasan Kode JavaScript

1. Membuat Objek Date

2. Mengambil Jam

3. Mengambil Menit

4. Mengambil Detik

5. Menambahkan Angka Nol

6. Menampilkan ke HTML

7. Memperbarui Setiap Detik

Hasil Program

Cara Kerja Program

Menambahkan Tanggal

Menambahkan Nama Hari

Membuat Tampilan Lebih Menarik

Kesalahan yang Sering Dilakukan Pemula

Salah menulis nama file

Salah menulis ID HTML

Tidak Memanggil JavaScript

Lupa Menjalankan Fungsi Pertama Kali

Tips Belajar JavaScript Melalui Proyek Jam Digital

Kesimpulan

Related Post

Leave a Reply Cancel reply