Jam Digital Menggunakan HTML, CSS dan Javascript

Cara membuat jam digital di website dengan menggunakan HTML, CSS dan juga Javascript.

Pertama-tama mari kita buat file dengan nama index.html dan masukkan kode berikut

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital Clock</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="clock">12:00:00</div>
    <script src="index.js"></script>
</body>
</html>

Selanjutnya buat file di folder yang sama dan beri nama style.css. File css ini untuk tampilan jam digital, silahkan dikreasi sesukanya.

CSS

.clock {
  font-size: 60px;
  font-family: 'Chiller', sans-serif;
  color: #000;
}

Kemudian untuk proses perhitungannya jam digitalnya kita buat file dengan nama index.js pada folder yang sama.

Javascript

const clockElem = document.querySelector(".clock");
const setCurrentTime = ()=>{
  const date = new Date();
  let hour = date.getHours();
  let minute = date.getMinutes();
  let seconds = date.getSeconds();
  
  hour = hour < 10 ? `0${hour}` : hour;
  minute = minute < 10 ? `0${minute}` : minute;
  seconds = seconds < 10 ? `0${seconds}` : seconds;
  let currentTime = `${hour}:${minute}:${seconds}`;
  clockElem.innerText = currentTime;
}
setInterval(setCurrentTime,100);

Silahkan dibuka file index.html menggunakan browser kesayangan anda