Creating a Digital Clock with JavaScript

In this blog post, we will walk you through the process of creating a digital clock using JavaScript. A digital clock is a great way to add a functional and visually appealing element to any website or application.

In this article I have created a digital clock using JavaScript code and shared it with you.

To start, we'll need to create an HTML structure to display the clock. We'll use a container element and within it we'll create three separate elements to display hours, minutes and seconds.

Source Code

<!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>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="days">
    <span>Sunday</span>
    <span>Monday</span>
    <span>Tuesday</span>
    <span>Wednesday</span>
    <span>Thursday</span>
    <span>Friday</span>
    <span>Saturday</span>
  </div>

  <div class="clock">
    <div class="h num">1</div>
    <div class="h num">2</div>
    <div class="colon">:</div>
    <div class="m num">1</div>
    <div class="m num">0</div>
    <div class="colon">:</div>
    <div class="s num">1</div>
    <div class="s num">0</div>
    <div class="meridian">
      <span>AM</span>
      <span>PM</span>
    </div>
  </div>

  <div class="date">
    12-10-2022
  </div>

  <div class="month">
    <span>JAN</span>
    <span>FEB</span>
    <span>MAR</span>
    <span>APR</span>
    <span>MAY</span>
    <span>JUN</span>
    <span>JUL</span>
    <span>AUG</span>
    <span>SEP</span>
    <span>OCT</span>
    <span>NOV</span>
    <span>DEC</span>   
</div>
  <script src="js/script.js"></script>
</body>
</html>

Next, we'll create a JavaScript function that will update the clock display every second. The function will use the Date object to get the current time and then update the HTML elements with the current hours, minutes and seconds.

In our JavaScript, we'll start by selecting the three HTML elements we created earlier and assign them to variables. Next, we'll create a new Date object and use the getHours(), getMinutes(), and getSeconds() methods to get the current time. We'll then update the inner HTML of the HTML elements with the current time, and pad the minutes and seconds with a leading zero if they are less than 10.

To make sure the clock is always accurate, we'll use the setInterval() method to call the update function every 1000 milliseconds (1 second).

And that's it! With just a few lines of code, you've created a fully functional digital clock. You can now customize the design and layout to match the aesthetic of your website or application.

js/script.js

const h=document.querySelectorAll('.h');
const m=document.querySelectorAll('.m');
const s=document.querySelectorAll('.s');
const span=document.querySelectorAll('.meridian span');
const days_span=document.querySelectorAll('.days span');
const month_span=document.querySelectorAll('.month span');
const date=document.querySelector('.date');


function runClock(){
  var time=new Date();
  //Date
  var da=time.getDate();
  da=da<10?'0'+da:da;
  var mo=time.getMonth()+1;
  mo=mo<10?'0'+mo:mo;
  var ye=time.getFullYear();
  date.innerHTML=`${da}-${mo}-${ye}`;
  //Day
  days_span[time.getDay()].classList.add('day-active');
  //Month
  month_span[time.getMonth()].classList.add('day-active');
  //Time
  var hrs=time.getHours();
  var min=time.getMinutes();
  var sec=time.getSeconds();

  if(hrs>12){
    hrs=hrs-12;
    span[1].classList.add('active');
  }else{
    if(hrs==0){
      hrs=12; 
    }
    span[0].classList.add('active');
  }

  hrs=hrs<10?'0'+hrs:hrs;
  min=min<10?'0'+min:min;
  sec=sec<10?'0'+sec:sec;

  hrs=hrs.toString(); //04
  min=min.toString();
  sec=sec.toString();

h[0].innerHTML=hrs[0];//0
h[1].innerHTML=hrs[1];//4

m[0].innerHTML=min[0];
m[1].innerHTML=min[1];

s[0].innerHTML=sec[0];
s[1].innerHTML=sec[1];

}

setInterval(runClock,1000);

you can adjust the CSS styles as desired to match the design of your website.

css/style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');


@font-face {
  font-family: 'DS-DIGI';
  src: url('DS-DIGI.TTF');
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #111;
  user-select: none;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  color:white;
}

.days,
.month
{
  width: 600px;
  height: 50px;
  color:rgba(113, 128, 147,0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.days span,
.month span
{
  font-size: 12px;
  width: 80px;
  height: 30px;
  text-align: center;
  line-height: 30px;
}

.day-active{
  color:rgba(255, 195, 18,1.0) !important;
}

.clock{
  width: 600px;
  height: 100px;
  font-size: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'DS-DIGI';
  color:rgba(76, 209, 55,1.0);
}

.num{
  width: 50px;
  height: 100px;
  position: relative;
  text-align: right;
}

.num::before{
  content: '0';
  position: absolute;
  top: 0;
  right: 0px;
  color:rgba(113, 128, 147,0.1);
}
.colon{
  width: 50px;
  height: 100px;
  text-align: center;
  animation: blink 0.7s ease infinite;
}


@keyframes blink {
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}


.meridian span{
  display: block;
  font-size: 25px;
  width: 30px;
  text-align: center;
  color:rgba(113, 128, 147,0.1);
}

.meridian span:nth-child(2){
  margin-top: 10px;
}
.active{
  color:rgba(76, 209, 55,1.0) !important;
}

.date{
  color:rgba(234, 32, 39,1.0);
  font-family: 'DS-DIGI';
  font-size:40px;
  font-weight: bold;
}

Output

Live Preview

Creating a digital clock with JavaScript is a simple and fun project that can add a lot of value to your website or application. With this knowledge, you can create a clock that not only looks great, but also keeps accurate time, making it a useful addition to any project.