Table of contents
In this article we will learn how to make a simple digital clock.
Prerequisites
HTML
CSS
JavaScript Basics and a little bit of DOM
HTML
Let us begin with the HTML part.
So to display the time , let us create a div and create four span elements to display the hour, minutes, seconds and session( AM or PM). Give each span a Id as shown in the code below.
<!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="digital.css">
<script src="digital.js"></script>
</head>
<body>
<div class="container">
<span id="hours">00</span>
<span>:</span>
<span id="minutes">00</span>
<span>:</span>
<span id="seconds">00</span>
<span id="session"></span>
</div>
</body>
</html>
Here's what it is going to look like.
CSS
Let us give it some style with CSS.
*{
margin: 0;
border: 0;
box-sizing: border-box;
}
body{
overflow: hidden;
background-color: antiquewhite;
}
.container{
color: blue;
position: absolute;
font-weight: bold;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 6rem;
display: flex;
flex-direction: row;
justify-content: space-around;
}
span{
padding: 1.2rem;
}
Here's what it is going it is going to look like.
JavaScript
Now let's make the clock working with some basic JavaScript.
Let us first define a function, let's call it displayTime(). Inside the function we will get the current date and time using "new Date()" object which is assigned to a variable called dateTime.
Now let's get the hours, minutes and seconds from the Date object by using "dateTime.getHours()" for the current hour, "dateTime.getMinutes()" for the current minute and "dateTime.getSeconds()" to get the seconds.
function displayTime(){
var dateTime = new Date();
var hrs = dateTime.getHours();
var min = dateTime.getMinutes();
var seconds = dateTime.getSeconds();
}
Now let us declare a var called “session” whose default value is “AM”.
Also by using if-else statement , we will set the session to “AM” or “PM” depending on the time. If the hours is greater than or equal to 12 , it’s AM else its PM. If the hrs is equal to 0, we’ll set it to 12.
var session = "AM";
if(hrs >= 12){
session = "PM";
if (hrs > 12) {
hrs = hrs - 12;
}
}
if(hrs == 0){
hrs = 12;
}
The code below is to display leading zeros for minutes and seconds when they are less than 10.
if(min < 10) {
min = "0" + min;
}
if(seconds < 10) {
seconds = "0" + seconds;
}
Now inside the same function , we will select the HTML elements using “document.getElementById” and then we will update the content to the current hour, minutes and seconds by using “.innerHTML=” “ “.
document.getElementById('hours').innerHTML = hrs;
document.getElementById('minutes').innerHTML = min;
document.getElementById('seconds').innerHTML = seconds;
document.getElementById("session").innerHTML = session;
Now, we will call the function using setInterval().
setInterval(displayTime, 10);
This code is using the method setInterval() to repeatedly call the displayTime() function at a set interval of 10 milliseconds.
So here's the full JS code
function displayTime(){
var dateTime = new Date();
var hrs = dateTime.getHours();
var min = dateTime.getMinutes();
var seconds = dateTime.getSeconds();
var session = "AM";
if(hrs >= 12){
session = "PM";
if (hrs > 12) {
hrs = hrs - 12;
}
}
if(hrs == 0){
hrs = 12;
}
if(min < 10) {
min = "0" + min;
}
if(seconds < 10) {
seconds = "0" + seconds;
}
document.getElementById('hours').innerHTML = hrs;
document.getElementById('minutes').innerHTML = min;
document.getElementById('seconds').innerHTML = seconds;
document.getElementById("session").innerHTML = session;
}
setInterval(displayTime, 10);
The clock after it is functional.
CodePen link:
Live Demo link:
I hope this helps you build a digital clock and understand the code behind it. Thank you.