JavaScript Digital Clock

Hello World,

In this article, we will see how we can develop Digital Clock using JavaScript. We are going to see how can we set Hours, Minutes and Seconds with AM/PM logic in html page using JavaScript.

Let's get started,

Prerequisite

Basic knowledge of HTML
Basic knowledge of CSS
Basic knowledge of JavaScript

Time to code!

To create digital clock, we need to create three files. One is HTML(DigitalClock.html), second is CSS(DigitalClock.css) and third one is JavaScript(DigitalClock.js) file.

HTML code

DigitalClock.html

<!DOCTYPE html> 
<html>
    <head>
        <meta  charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=ed">
        <title>Digital Clock</title>
        <!--to link external css file-->
        <link rel="stylesheet" href="DigitalClock.css">
    </head>
    <body>
        <!--to show time -->
        <div id="DigitalClock">
        </div>
        <!--to link external JavaScript file-->
        <script src="DigitalClock.js"></script>
    </body>
</html>

CSS code

DigitalClock.css

body{
    font-family:  sans-serif;
    background-image: linear-gradient(45deg, #5a6168, #345264);
    padding: 0;
    min-height: 100vh;
    margin: 0;
    position: relative;
}

#DigitalClock{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #00f5f5;
    font-size: 7em;
    background-color: transparent;
    font-family: Arial;
    word-break: none;
    padding: 20px auto;
    text-shadow: 0px 0px 50px;
}

JavaScript code

This is the main section for our digital clock.

For, JavaScript file code we will step by step.

Step 1:- Create one function showTime().

function showTime()
{
  /*code to update time*/
}

Step 2:- Inside showTime() function, create a object of Date class. With the help of ate class object we can get current time data like Hour, Minutes, Second etc.


function showTime(){

    /*creating object of Date class*/
    var date = new Date();

    /*to fetch current hours*/
    var hour = date.getHours();

    /*to fetch current minutes*/
    var minute = date.getMinutes();

    /*to fetch current seconds*/
    var secound = date.getSeconds();
}

Step 3:- The Date object works on 24-Hours format, so we have to convert it in 12-Hours format and also according to that AM/PM is going to change.

    var AM_PM = "AM";

    if(hour == 12){
        AM_PM = "PM";
    }

    if(hour == 0){
        hour  = 12;
        AM_PM = "AM";
    }

    if(hour > 12){
        hour  -= 12;
        AM_PM = "PM";
    }

Step 4:- Retrieved Hours, Minutes and Seconds is in 2-Digit. But, it will display as 1-Digit in case of less then 10. We need to add 0 before data so it will show as 2-Digit format.

    hour = hour  < 10 ? "0" + hour : hour;
    minute = minute < 10 ? "0" + minute : minute;
    secound = secound < 10 ? "0" + secound : secound;

Step 5:- Now, our time created with 2-Digit format, we need to create time string which is going to display. To do that we need to use string concatenation. Also, at last we are adding AM/PM accordingly.

    var time = hour + ":" + minute  + ":" + secound + " " + AM_PM;

Step 6:- Now our time string is ready. We need to show this in div which is we made in html file. For that, we need to obtain the div using document.getElementById method and add our time string as a content of div using innerHTML property.

    document.getElementById("DigitalClock").innerHTML = time;

Step 7:- We have created showTime(), but we have to call this function after every one second. For that we are going to us setTimeout().

    setTimeout(showTime, 1000);

After every 1 second setTimeOut() is going to call showTime() and it will update time on our html page.

Step 8:- We need to call showTime() at the end of showTime function, so it will call while reloading page and it will initiate the digital clock.

    showTime();

Complete JavaScript Code

DigitalClock.js

function showTime(){
    /*creating object of Date class*/
    var date = new Date();
    /*to fetch current hours*/
    var hour = date.getHours();
    /*to fetch current minutes*/
    var minute = date.getMinutes();
    /*to fetch current seconds*/
    var seconds= date.getSeconds();
    var AM_PM = "AM";
    if(hour  == 12){
        AM_PM = "PM";
    } 
    if(hour  == 0){
        hour  = 12;
        AM_PM = "AM";
    } 
    if(hour  > 12){
        hour  -= 12;
        AM_PM = "PM";
    }  
    hour = hour  < 10 ? "0" + hour : hour;
    minute = minute < 10 ? "0" + minute : minute;
    secound = secound < 10 ? "0" + secound : secound;
    var time = hour + ":" + minute  + ":" + secound + " " + AM_PM;

    document.getElementById("DigitalClock").innerHTML = time;
    setTimeout(showTime, 1000);
}   

showTime();

Great, we have created Digital Clock using JavaScript. It will look something like this!.

Thank you for reading, You can connect me on Twitter / LinkedIn / Github .

Sahil Rajput