htmlcssjavascriptwaktuaplikasiPemula8 mnt baca

Jam Digital Real-Time

Jam digital yang berdetak setiap detik lengkap dengan tanggal berbahasa Indonesia.

Kenapa Jam Digital?

Jam digital adalah cara paling ramah untuk belajar Date di JavaScript dan setInterval. Konsepnya dipakai di mana-mana: countdown promo, timer ujian, jadwal sholat.

Langkah Membangun

HTML: <div class="jam"> berisi tiga <span> (jam, menit, detik) dipisahkan titik dua, plus <p id="tanggal">.

CSS: Tampilan seperti jam LED: font monospace besar (font-variant-numeric: tabular-nums agar angka tidak bergeser), background gelap, teks terang. Kartu di tengah layar dengan sedikit glow.

JS: Fungsi updateJam():

  1. const kini = new Date()
  2. Ambil jam/menit/detik, tambah nol di depan jika satu digit: String(n).padStart(2, "0")
  3. Tulis ke elemen.
  4. Tanggal Indonesia: kini.toLocaleDateString("id-ID", { weekday: "long", day: "numeric", month: "long", year: "numeric" }) menghasilkan "Kamis, 8 Oktober 2026".

Panggil sekali langsung, lalu setInterval(updateJam, 1000) tiap detik.

Kenapa padStart?

Tanpa itu jam tampil "9:5:3" yang sulit dibaca. padStart(2, "0") memastikan selalu dua digit: "09:05:03".

Kesalahan Umum

  • Interval 1000ms tapi fungsi tidak dipanggil langsung, sehingga jam kosong selama 1 detik pertama.
  • Memakai toLocaleDateString tanpa locale sehingga format mengikuti browser (tidak konsisten).
  • Membuat interval baru setiap render di aplikasi besar (bocor memori); selalu simpan id interval jika perlu dihentikan.
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Countdown Ujian

Ubah menjadi countdown menuju tanggal ujian: tampilkan sisa hari, jam, menit, detik. Jika waktu habis, tampilkan "Waktu habis!".