How to Make a Digital Clock Using Pure JavaScript

Want to learn how to create a digital clock using only JavaScript? In this post, I’ll show you step-by-step how to build a real-time digital clock with pure JavaScript. It’s a great project for beginners looking to improve their coding skills or for anyone who needs a clock for their website.

Why Make a Digital Clock?

Creating a digital clock is a fun way to practice using JavaScript. You’ll learn how to:

Use the Date() object in JavaScript to get the current time.
Show hours, minutes, and seconds on the screen.
Make the clock update every second so it shows the real time.
Display the time in a 12-hour format with AM/PM.

By the end, you’ll have a working digital clock that you can add to any project!

Watch the Full Tutorial on YouTube

If you prefer watching a video, check out my full tutorial on YouTube:

Step-by-Step Guide to Build the Digital Clock

1. Create the HTML Structure

We’ll start by setting up the HTML code that will display the clock.

    
     <!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 data-rsssl=1>
    <div id="clock"></div>
    <script src="script.js"></script>
</body>
</html>

2. Add CSS for the Clock Display

Now, let’s style the clock with some simple CSS to make it look nice.

    
     #clock {
    font-family: 'Arial', sans-serif;
    font-size: 48px;
    color: #333;
    text-align: center;
    margin-top: 20%;
}

3. Write the JavaScript to Display the Time

This is where we make the clock work. The JavaScript code below will get the current time and display it in a 12-hour format.

    
     function updateClock() {
    const clockElement = document.getElementById('clock');
    const now = new Date();
    let hours = now.getHours();
    let minutes = now.getMinutes();
    let seconds = now.getSeconds();
    let period = 'AM';

    // Convert to 12-hour format and set AM/PM
    if (hours >= 12) {
        period = 'PM';
        hours = hours > 12 ? hours - 12 : hours;
    }
    hours = hours === 0 ? 12 : hours;

    // Add leading zeros to minutes and seconds if needed
    hours = hours < 10 ? '0' + hours : hours;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;

    // Update the clock display
    clockElement.textContent = `${hours}:${minutes}:${seconds} ${period}`;
}

// Initialize the clock and make it update every second
updateClock();
setInterval(updateClock, 1000);

Why Use Pure JavaScript?

Using only JavaScript to build a digital clock helps you practice core JavaScript skills without relying on any external libraries. This will give you a solid understanding of how to work with time and make real-time updates.

Watch the Video for More Details

Want to see the full process? Watch my step-by-step video tutorial here:

Building a digital clock with JavaScript is a simple and fun project that helps you improve your coding skills. It’s also a great addition to any website that needs a real-time clock feature.

Let me know in the comments if you have any questions, and don’t forget to watch the video for more details!

AUZ Tutorials