Design a simple Digital Clock with Date using JavaScript

I am sharing a simple JavaScript code here, which you can use to design a Digital Clock, with date, month and year. In-addition there is a little bit of CSS in the example to style the clock.

image

See this demo

The Markup and Style

To design the clock, I have few <div> elements on my web page, to show time like hours, minutes and seconds. It will also show AM or PM depending upon the time. The final <div> element will show the Day of the week, followed by the moth, date and the current year.

I am using a special font here called "Orbitron" for the clock. Inside the <head> tag, I have added the font's CDN.

<!DOCTYPE html>
<html>
<head>
    <title>Digital Clock with Date using JavaScript</title>
    <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" type="text/css"/>

    <style> 
    	* { 
            font-family: Orbitron;
            font-size: 50px;
            font-weight: normal;
            float: left; 
            color: #555;
        }
        .clock {
            width: 290px;
            padding-right: 5px;
            overflow: hidden;
            letter-spacing: 2px;
        }
        .dH {
            clear: both;
            padding: 0 13px;
            font-size: 40%;
            float: none;
            text-align: center;
        }
    </style>
</head>

<body>
    <div style='border: solid 1px #ddd; padding: 30px 20px; '>
        <div class='clock' id='dc'></div>       
        <div id='dcHour' style='color: #000; font-weight: bold;'></div>
        <div class='dH' id='day_year'></div>    
    </div>
</body>

Even though we have designed the clock, its not functional yet. You will see a blank page when you run it on a browser. To make it functional, we’ll need a script, a JS script. Your browser must have JavaScript enabled. Or else, the script won’t execute.

The JS Script

<script>
    setInterval(function() {
        let dt = new Date();
        let hrs = dt.getHours();
        let min = dt.getMinutes();
        let sec = dt.getSeconds();
        
        min = startTicking(min);
        sec = startTicking(sec);

        // Show time and date.
        document.getElementById('dc').innerHTML = hrs + ':' + min + ':' + sec;
        document.getElementById('day_year').innerHTML = dt.toDateString();
        
        if (hrs >= 12) { 
            document.getElementById('dcHour').innerHTML = 'PM'; 
        }
        else { 
            document.getElementById('dcHour').innerHTML = 'AM'; 
        }
    });
    
    let startTicking = (val) => {
        if (val < 10) {
            val = '0' + val;
        }
        return val;
    }
</script>
</html>

Try it

I have two functions.
The first is the setInterval() method. Its an “in-built” JavaScript method, which usually calls a function or evaluates a piece of code, after a specified delay.

Here’s the syntax.

setInterval (function(), [delay])

The method takes two parameters. The first parameter is a function (or an expression). The second parameter is a time delay (in milliseconds) after which it calls the function.

So, the method in my script (above), has piece of code (for the clock) and I have not mention any delay, to start the clock immediately when the page loads.

There are few more in-built methods, like Date(), getHours() etc., which provides us with necessary data from the clock.

To get the month, year, date and day of week, I using a method called .toDateString(). This is an in-built function.

document.getElementById('day_year').innerHTML = dt.toDateString();

Note: If you want to convert Days and Months to String, see this post.

The second function starTicking() will check if the minutes and seconds are less than 10 or a single digit number. It simply adds a 0 (zero) before the single digit number.

Remember, since this script runs on a browser, the clock shows the time taken from the user’s computer (its not the server time).

Thanks for reading ☺.

← PreviousNext →

Design a simple Digital Clock with Date using JavaScript

Tools you can use