Design a Digital Clock using JavaScript

In this tutorial, we are going to design a simple digital clock widget using CSS and JavaScript. The basic requirement for a digital clock is to display the time in digits in 12/24 hours time format. So, in JavaScript, we can easily get current (local) time in 24 hours format. But we need to set conditions for the AM/PM time format.

A digital clock can be created in JavaScript using the built-in Date object. Further, we need to work with the JavaScript timer function and then style these digits in CSS to design a digital clock. Besides this, you can also add some additional styles to modify the overall look and feel of the clock widget.

You can implement this clock in your Quiz app, limited time offers, portfolios, or general-purpose clock on your website. Similarly, you can customize the size, fonts, color of the digits according to your needs. OK! let’s get started with coding to create a digital clock.

HTML and CSS Styles for Digital Clock

First of all, load the “Orbitron” Google fonts CSS in the head tag of your project. We’ll use this font-family for the clock digits to get a realistic look for the digital time.

<!-- Orbitron Fonts CSS -->
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Orbitron'>

After that, you just need to create a div element with a unique ID in which the time will be rendered. So, create a div element with a class name "clock", define ID attribute "MyClockDisplay", and specify the inline function showTime() for the onload attribute. You can place this div tag anywhere in your HTML document where you want to display the clock.

<div id="MyClockDisplay" class="clock" onload="showTime()"></div>

Leave the above div element blank because the showTime() function will insert time inside it. Anyhow, you can wrap this time container in any other div element to customize it according to your needs (e.g clock widget).
CSS.

After creating the HTML, define the CSS styles for the clock to look like a realistic feel of the digital clock. For this purpose, target the "clock" class and set its absolute position. In order to align it to the middle of the page (or the outer relative container), define the top left value as 50% along with CSS transform translate X & Y as -50%.

Similarly, set the color (for the digits), font size, and define the "Orbitron" font-family for the digital numbers. Use the CSS letter-spacing property to add some gaps between hours, minutes, and seconds.

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

You can set the custom background color for the “clock” class, otherwise, it will adopt the background of its parent element. You can also try this CSS animated wave background for your clock widget.

The JavaScript Code for Digital Clock

After getting everything ready, now it’s time to create a JavaScript function to get the time and display it on the page. So, the following is the function in which we get the current time. We used the if condition to set the 12 hours time format along with AM/PM session. If you want to show the time in 24 hours then simply remove this condition.

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();

You have done it! Hopefully, you got this tutorial helpful to develop a digital clock in JavaScript. Let me know by comment below if you have successfully implemented this clock widget into your project.