Create a Digital Clock Using HTML, CSS and JavaScript

Creating a digital clock using HTML, CSS and JavaScript is a great project for beginners learning web development. In this tutorial, you'll learn how to use HTML, CSS and JavaScript to display the current time dynamically on your webpage. Use JavaScript Date() object to fetch real-time hours, minutes, and seconds and update them automatically. It will help you understand DOM manipulation in JavaScript.

We will first design a digital clock using HTML and CSS and then write JavaScript code to make digital clock run continuously.

Below is the screenshot of clock design

We will follow the below steps:

Design a digital clock using HTML and CSS with Bootstrap 5
Write JavaScripts to make the clock running.

Watch YouTube Video

Design a digital clock using HTML and CSS with Bootstrap 5

We will design a simple digital clock using HTML and CSS with Bootstrap 5. You can add Bootstrap 5 library from CDN. The html code for this is given below:


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Digital Clock</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="clock-box">
                <div id="showDate"></div>
                <div class="showClock">
                    <span id="hrs">00</span>
                    <span>:</span>
                    <span id="min">00</span>
                    <span>:</span>
                    <span id="sec">00</span>
                </div>
            </div>
        </div>
        </body>
        </html>

This is just the design. We are displaying the date and the time. We have added our custom stylesheet. We will update the date and the time (hours, minutes and seconds) using JavaScripts. Our stylesheet is given below:


*{
    box-sizing: border-box;
}
.clock-box{
   position: absolute;
   width: 750px;
   height: 300px;
   top:25%;
   left:25%;
   background-color: #000;
   border-radius: 10px;
}
#showDate{
    font-size: 63px;
    height: 120px;
    color:aqua;
    display: flex;
    justify-content: center;
    align-items: center;
}
.showTime{
    font-size: 144px;
    color:#fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

Write JavaScripts to make the clock running

We will create a JavaScript Date object by using:


let date = new Date();

We will then make use of following methods on the Date object:

getDate() - date
getMonth() - month in number (0-11)
getFullYear() - 4 digit year
getHours() - hours
getMinutes() - minutes
getSeconds() - seconds

Since getMonth() method gives month number, we will convert it to month name by using a JavaScript array of 12 month names as below:


const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
];

We will create a JavaScript function and call this function using setInterval() function with an interval of one second. Let see the code below:


function showDateTime() {
        let showDate = document.getElementById("showDate");
        let hrs = document.getElementById("hrs");
        let min = document.getElementById("min");
        let sec = document.getElementById("sec");

        const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
        ];

        // create a JavaScript Date object
        let date = new Date();
        // getDate() - date
        // getMonth() - month in number (0-11)
        // getFullYear() - 4 digit year 
        // getHours()
        // getMinutes()
        // getSeconds()

        let dispDate = date.getDate() + " " + monthNames[date.getMonth()] + " " + date.getFullYear();
        showDate.innerHTML = dispDate;

        let dispHrs = date.getHours();
        let dispMin = date.getMinutes();
        let dispSec = date.getSeconds();

        // if values are < 10 prefix 0
        dispHrs = (dispHrs < 10 ? "0" : "") + dispHrs; 
        dispMin = (dispMin < 10 ? "0" : "") + dispMin; 
        dispSec = (dispSec < 10 ? "0" : "") + dispSec; 

        hrs.innerHTML = dispHrs;
        min.innerHTML = dispMin;
        sec.innerHTML = dispSec;
    }  // function ends
    setInterval(showDateTime, 1000);

Note that we are prefixing the hour, minute and second values with a zero, when a value is less than 10. This is just to make sure we display 2 digits for each of them. setInterval() function calls our showDateTime() function every 1000 miliseconds (1 second).

Test the Application

In the browser just run index.html. You will see the clock is ticking and also the current date is displayed.

Download Source Code

You can download the source code from GitHub by clicking on the download button below:

Conclusion

In this JavaScript tutorial, we have learned how to create a digital clock using HTML, CSS and JavaScript. You now understand how to use JavaScript Date() object and update the clock every second. Keep experimenting by adding features like AM/PM format. This is a great foundation for more advanced JavaScript projects for beginners that improve your coding skills.

Hope it will be useful to you. Please write your comments/questions in the Comments section below. Your questions, doubts and suggestions are always welcome.