Digital Clock Using HTML, CSS and JavaScript

A Digital Clock is one of the best beginner-friendly projects to understand how HTML, CSS, and JavaScript work together in real time.
In this tutorial, we will build a live digital clock that shows the current hours, minutes, and seconds with a clean and modern UI.

This project helps you learn:

JavaScript Date & Time functions
DOM manipulation
Basic UI styling with CSS

🎥 Digital Clock Video Tutorial

If you prefer learning visually, this Digital Clock project is also explained in a step-by-step video tutorial.

In the video, you will see how the clock updates live using JavaScript and how each part of the code works together.

👉 Watch the complete tutorial below to understand the logic and UI clearly.

🧱 HTML Source Code – Digital Clock Structure

The HTML code defines the basic structure of the digital clock.
It includes a container to display hours, minutes, and seconds in a readable format.

Using clean and semantic HTML makes the clock easy to understand, accessible, and SEO-friendly.
All real-time functionality is handled later using JavaScript.

👉 Below is the complete HTML source code for the Digital 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>
    <main>
      <div class="header">
        <div class="brand">
          <div class="logo">CL</div>
          <div>
            <div class="title">Digital Clock</div>
            <div class="subtitle">12/24 hour - Dark mode only</div>
          </div>
        </div>
        <div class="toggle">
            <div class="btn activeToggle" id="btn-12">12 hr</div>
             <div class="btn" id="btn-24">24 hr</div>
        </div>
      </div>

      <div class="display">
        <div class="time-wrap">
            <div class="time" id="time">00:00:00</div>
            <div class="ampm" id="ampm">AM</div>
        </div>
        <div class="meta">
            <div id="date">January 1, 2025</div>
            <div id="day">Monday</div>
        </div>
      </div>

      <div class="foot">
        <div>Auto updates every second</div>
        <div>Local Time</div>
      </div>
    </main>
  </body>
  <script src="script.js"></script>
</html>

🎨 CSS Source Code – Digital Clock Styling

CSS is used to design the visual appearance of the digital clock.
It helps create a modern look using font styling, colors, alignment, and spacing.

In this project, CSS is used for:

Centering the clock on the screen
Styling the clock digits
Creating a clean and minimal UI

The design is fully responsive and looks good on both desktop and mobile devices.

👉 Below is the CSS code used to style the digital clock.

				
					*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body{
    height: 100vh;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
main{
    width: 550px;
    background: #0a0f1c;
    color: #9ca3af;
    padding: 25px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);

}

.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand{
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo{
    font-size: 22px;
    padding: 15px;
    background: #15b7b9;
    color: #fff;
    border-radius: 10px;
}

.title{
    font-size: 18px;
    font-weight: 500;
}
.subtitle{
    font-size: 12px;
}
.toggle{
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.05);
    padding: 6px;
    border-radius: 150px;
}
.btn{
    padding: 8px 12px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.activeToggle{
    color: #15b7b9;
    background: rgba(255,255,255,0.08);
}

.display{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.time-wrap{
    display: flex;
    align-items: baseline;
}

.time{
    font-size: 65px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 6px;
}

.ampm{
    font-size: 18px;
}

.meta{
    display: flex;
    flex-direction: column;
    grid-area: 10px;
    text-align: end;
}

.foot{
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

⚙️ JavaScript Source Code – Live Time Logic

JavaScript is the core of this Digital Clock project.
It fetches the current system time using the Date object and updates the clock every second.

With simple JavaScript logic:

Hours, minutes, and seconds update in real time
The clock stays accurate without refreshing the page
Beginners can easily understand the working concept

This makes the project perfect for practicing real-time DOM updates.

👉 Below is the JavaScript source code for the live digital clock.

				
					const btn_12 = document.getElementById("btn-12")
const btn_24 = document.getElementById("btn-24")
const time = document.getElementById("time")
const ampm = document.getElementById("ampm")
const date = document.getElementById("date")
const day = document.getElementById("day")

let hour12 = true;

function pad(n) {
    return String(n).padStart(2, "0")
}

const clock = () => {
    const now = new Date()

    let h = now.getHours()
    let m = now.getMinutes()
    let s = now.getSeconds()

    let AmPm = "";

    if (hour12) {
        AmPm = h >= 12 ? "PM" : "AM";
        h = h % 12 || 12;
    }

    time.textContent = `${pad(h)}:${pad(m)}:${pad(s)}`;
    ampm.textContent = AmPm;
    ampm.style.display = hour12 ? "block" : "none"

    let nowDate = now.toLocaleDateString("en-US", {
        day: "numeric",
        month: "long",
        year: "numeric"
    })

    let nowDay = now.toLocaleDateString("en-US", {
        weekday: "long"
    })

    date.textContent = nowDate;
    day.textContent = nowDay;

}

btn_12.addEventListener("click", () => {
    hour12 = true;
    btn_12.classList.add("activeToggle");
    btn_24.classList.remove("activeToggle");
})

btn_24.addEventListener("click", () => {
    hour12 = false;
    btn_12.classList.remove("activeToggle");
    btn_24.classList.add("activeToggle");
})


setInterval(clock, 1000)

✅ Conclusion

This Digital Clock using HTML, CSS, and JavaScript is a great beginner project to improve your frontend development skills.
It teaches you how to work with time, DOM manipulation, and UI styling in a practical way.

You can enhance this project further by adding: