🔮 Jam Digital Futuristik: Aplikasi Web Cantik dari HTML, CSS, dan JavaScript

🔮Jam Digital Futuristik: Aplikasi Web Cantik dari HTML, CSS, dan JavaScript

Jam digital bukanlah hal baru di dunia pemrograman web. Tapi bagaimana kalau kita membuat jam digital yang tampil super futuristik, punya efek neon glow, dan terasa hidup dengan animasi denyut cahaya? Di artikel ini, kamu akan belajar cara membuat jam digital yang tidak biasa — bahkan mungkin belum pernah kamu lihat sebelumnya!

✨ Apa yang Membuat Jam Ini Spesial?

Banyak jam digital hanya sekadar menampilkan waktu dengan teks hitam-putih dan font biasa. Jam yang akan kita buat di sini berbeda karena:

  • Menggunakan desain modern bergaya neon futuristik.
  • Dilengkapi animasi cahaya berdenyut di latar belakang.
  • Menampilkan waktu dan tanggal secara real-time.
  • Bisa dijadikan hiasan digital untuk situs web, layar interaktif, atau presentasi.

🧩 Teknologi yang Digunakan

Jam digital ini dibuat dengan:

  • HTML untuk struktur elemen.
  • CSS untuk tampilan dan animasi.
  • JavaScript untuk logika waktu dan pembaruan otomatis.

Semua file dipisah dengan rapi agar kamu bisa memodifikasi dan mengembangkan lebih lanjut.

🧱 Langkah-Langkah Pembuatan

1. Struktur HTML (index.html)

Kita buat elemen-elemen dasar untuk wadah jam, teks jam, dan tanggal:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Jam Digital Futuristik</title>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="clock-container">
    <div class="glow-circle"></div>
    <div class="clock" id="clock">00:00:00</div>
    <div class="date" id="date">Loading...</div>
  </div>
  <script src="script.js"></script>
</body>
</html>

2. Tampilan CSS (style.css)

Desain dibuat gelap dan elegan, dengan efek glow biru muda dan animasi lembut:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background: radial-gradient(circle at center, #000010, #000000);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  overflow: hidden;
  color: white;
}

.clock-container {
  position: relative;
  text-align: center;
}

.glow-circle {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0,255,255,0.2), transparent 70%);
  border: 2px solid #00ffff;
  border-radius: 50%;
  filter: blur(20px);
  animation: pulse 4s infinite ease-in-out;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.clock {
  font-size: 5rem;
  text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 40px #00ffff;
  z-index: 2;
}

.date {
  font-size: 1.5rem;
  margin-top: 10px;
  color: #aaa;
  text-shadow: 0 0 5px #0ff;
  z-index: 2;
}

@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
}

3. Logika JavaScript (script.js)

Script JavaScript bertugas memperbarui jam dan tanggal setiap detik:

function updateClock() {
  const now = new Date();
  const time = now.toLocaleTimeString('id-ID', { hour12: false });
  const date = now.toLocaleDateString('id-ID', {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });

  document.getElementById("clock").textContent = time;
  document.getElementById("date").textContent = date;
}

setInterval(updateClock, 1000);
updateClock(); // Initial call

🧠 Apa yang Bisa Kamu Pelajari?

Dengan membuat jam ini, kamu belajar banyak hal sekaligus:

  • Bagaimana cara menghubungkan HTML, CSS, dan JavaScript.
  • Cara membuat animasi CSS yang halus dan estetik.
  • Cara memformat waktu dan tanggal lokal secara real-time.
  • Prinsip desain antarmuka yang menarik secara visual.

🎨 Ingin Lebih Canggih?

Kamu bisa menambahkan fitur seperti:

  • Tombol ubah warna tema (dark/light).
  • Jam analog kecil di pojok.
  • Fitur alarm atau pengingat.
  • Tampilan full-screen otomatis untuk digunakan di layar monitor sebagai jam dinding digital.

💬 Penutup

Jam digital ini bukan hanya proyek sederhana — tapi juga karya seni digital kecil yang bisa kamu banggakan. Cocok untuk ditampilkan di portofolio, tugas sekolah, bahkan dijadikan widget interaktif untuk situs pribadi.

Selamat mencoba dan semoga kamu menikmati membuatnya sama seperti saya menikmati merancangnya. Jangan ragu untuk berkreasi lebih jauh dan tunjukkan gayamu sendiri!


Komentar

Posting Komentar