AUZ Tutorials

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!

Leave a Comment

Your email address will not be published. Required fields are marked *