Pada tutorial Konsep Koding kategori Web HTML, Konsep Koding akan berbagi tutorial membuat sebuah Jam Digital berbasis web menggunakan  HTML, CSS dan Javascript. Di tutorial kali ini kita memepelajari mengenai logika untuk waktu dengan membuat sebuah jam digital. 

Tutorial Membuat Jam Digital Dengan HTML, CSS, Javascript

Tutorial Membuat Jam Digital Dengan HTML, CSS, Javascript



1. Pertama buat sebuah file baru dengan nama index.html kemudian ketikan kode html di bawah ini :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Jam Digital Konsep Koding</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Orbitron"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Aldrich"
    />
    <link rel="stylesheet" href="./style.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  </head>
  <body>
    <div id="MyClockDisplay" class="clock" onload="showTime()"></div>
    <script src="./script.js"></script>
  </body>
</html>


2. Setelah itu buat file baru dengan nama style.css dan ketikan kode css di bawah ini :

body {
  background: black;
}

.clock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #17fe4d;
  font-size: 60px;
  font-family: Orbitron;
  letter-spacing: 7px;
}

3. Kemudian untuk logic buat file baru dengan nama script.js kemudian ketikan kode di bawah ini :

function showTime(){
    var date = new Date();
    var h = date.getHours(); // 0 - 23
    var m = date.getMinutes(); // 0 - 59
    var s = date.getSeconds(); // 0 - 59
    var session = "AM";
    
    if(h == 0){
        h = 12;
    }
    
    if(h > 12){
        h = h - 12;
        session = "PM";
    }
    
    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;
    
    var time = h + ":" + m + ":" + s + " " + session;
    document.getElementById("MyClockDisplay").innerText = time;
    document.getElementById("MyClockDisplay").textContent = time;
    
    setTimeout(showTime, 1000);
    
}

showTime();


Kemudian buak di browser chrome atau firefox atau browser lainnya, maka hasilnya akan seperti gambar di bawah ini :




Sekian untuk tutorial membuat Jam Digital berbasis web dengan HTML, CSS dan JS semoga artikel ini dapat bermanfaat dan membantu kamu yang sedang mempelajari pemrograman Web. Untuk source code nya bisa di download di sini :  Source Code Jam Digital