Membuat Jam Digital Sendiri di Website dengan HTML + CSS + JavaScript

Pernah nggak sih kamu terpikir untuk punya jam digital buatan sendiri yang tampil di website kamu? Atau sekadar ingin belajar coding sederhana tapi nggak tahu harus mulai dari mana? Nah, kali ini saya akan berbagi tutorial membuat jam digital sendiri di website hanya menggunakan HTML + CSS + JavaScript. Simpel, gampang, dan dijamin bisa kamu praktekkan walaupun kamu masih pemula!

Kenapa Harus Belajar Bikin Jam Digital?

Saya mulai belajar coding dari hal kecil dan seru kayak gini. Jujur, awalnya saya juga bingung harus belajar coding dari mana. Tapi ternyata, bikin proyek kecil seperti jam digital ini sangat efektif untuk belajar dasar-dasar front-end web. Kamu bisa belajar struktur HTML, styling CSS, dan logika JavaScript hanya dari satu proyek singkat ini.

Selain itu, ini bisa banget jadi bahan untuk portofolio kamu loh. Kalau kamu freelance atau ingin bikin CV online, kamu bisa pamerin: “Ini hasil coding saya!” – kebanggaan tersendiri, ya nggak? Hehehe...

Alat yang Dibutuhkan

Yang kamu butuhkan hanya:

Browser (Chrome, Firefox, dll)
Text Editor (Notepad++, VS Code, Sublime Text, atau bahkan Notepad biasa)
Waktu 10-15 menit dan semangat belajar!

Langkah 1: Struktur HTML

Copy kode di bawah ke file jam.html kamu:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jam Digital Sederhana</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Jam Digital by [Nama Kamu]</h1>
    <div id="clock"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

Penjelasan singkat: Elemen #clock akan menampilkan waktu secara real-time, dan kita akan mengatur tampilannya nanti lewat CSS.

Langkah 2: Desain CSS

Simpan kode berikut ke file style.css:

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

.container {
  text-align: center;
}

#clock {
  font-size: 60px;
  font-weight: bold;
  background-color: #282828;
  padding: 20px 40px;
  border-radius: 15px;
  box-shadow: 0 0 10px #00ffcc;
}

Tampilan jam kamu akan jadi modern dengan latar gelap dan efek cahaya biru, sangat cocok untuk tema digital minimalis.

Langkah 3: JavaScript untuk Real-Time

Kode JavaScript ini akan membuat jam terus berjalan:

setInterval(function() {
  const clock = document.getElementById("clock");
  const now = new Date();
  let hours = now.getHours().toString().padStart(2, "0");
  let minutes = now.getMinutes().toString().padStart(2, "0");
  let seconds = now.getSeconds().toString().padStart(2, "0");
  clock.innerHTML = hours + ":" + minutes + ":" + seconds;
}, 1000);

Penjelasan singkat: setiap 1 detik, fungsi ini akan memperbarui elemen #clock dengan jam, menit, dan detik saat ini.

Preview Hasil Akhir

Setelah kamu jalankan file jam.html di browser, kamu akan melihat tampilan jam digital berjalan yang elegan dan buatan kamu sendiri!

Kalau mau lebih keren, kamu bisa tambahkan fitur-fitur seperti:

Tanggal hari ini
Mode gelap dan terang
Efek animasi saat pergantian waktu
Suara klik detik

Bonus: Jam Ini Bisa Kamu Tempel di Website atau Blog

Kamu punya blog atau landing page? Jam digital ini bisa kamu embed sebagai widget tambahan. Bisa juga kamu taruh di halaman portofolio agar tampak profesional dan interaktif.

Tips Tambahan Biar Makin Jago

Cobalah ubah warna dan font untuk belajar CSS lebih lanjut.
Pelajari lebih lanjut JavaScript seperti setTimeout, Date(), dan manipulasi DOM.
Gabungkan dengan animasi CSS agar tampilannya makin smooth.

Kenapa Ini Cocok untuk Pemula?

Saya sudah mencoba ngajarin beberapa teman saya yang benar-benar awam soal coding, dan mereka berhasil bikin jam digital ini hanya dalam 15 menit. Bahkan ada yang langsung kepikiran buat bikin web portofolio pribadi dari sini.

Kalau saya bisa, kamu juga pasti bisa!

Penutup: Mulai dari Jam, Bisa Jadi Programmer Hebat

“Jam Digital” ini mungkin terlihat sederhana, tapi inilah proyek awal yang sangat bermanfaat. Karena dari proyek seperti ini, kamu bisa belajar:

Struktur dasar HTML
Penerapan CSS
Interaksi langsung dengan JavaScript

Saya pribadi merasa bangga bisa membuat sesuatu dari nol. Bahkan sampai sekarang, saya masih menyimpan file jam digital pertama saya—buat kenang-kenangan dan bukti bahwa semua bisa dimulai dari langkah kecil.

Yuk, kamu juga coba! Kalau udah berhasil, jangan lupa share ya di komentar atau upload hasilmu ke GitHub dan kasih link-nya. Kita bisa saling lihat hasil karya dan belajar bareng. 😄

Sampai jumpa di tutorial selanjutnya!

Cari Blog Ini

Tutorial LifeHack