Digital clock in javascript

Digital clock in javascript

In this post, you will learn how to create a Digital Clock in 24-hour format using JavaScript.

Let’s start with HTML

HTML Code

<div id="clock"></div>

CSS Code

@import url('https://fonts.googleapis.com/css?family=Orbitron');

body {
  background-color: #121212;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

#clock {
  font-family: 'Orbitron', sans-serif;
  color: #66ff99;
  font-size: 56px;
}

Javascript code

function currentTime() {
  var date = new Date(); /* creating object of Date class */
  var hour = date.getHours();
  var min = date.getMinutes();
  var sec = date.getSeconds();
  hour = updateTime(hour);
  min = updateTime(min);
  sec = updateTime(sec);
  document.getElementById("clock").innerText = hour + " : " + min + " : " + sec; /* adding time to the div */
    var t = setTimeout(function(){ currentTime() }, 1000); /* setting timer */
}

function updateTime(k) {
  if (k < 10) {
    return "0" + k;
  }
  else {
    return k;
  }
}

currentTime(); /* calling currentTime() function to initiate the process */
Comments are closed.
error

Let's make it official :) Subscribe to my Youtube Channel.