Build a Real-Time Digital Clock using HTML, CSS, and JavaScript

Beginner 7 views Jun 26, 2026
Digital Clock Using HTML CSS and JavaScript with Animated Circular Progress Bars

Want to create a modern digital clock using HTML, CSS, and JavaScript? In this tutorial, you'll learn how to build a real-time digital clock with animated circular progress bars and glowing neon effects.

This project is perfect for beginners learning JavaScript, students practicing front-end development, and developers looking to improve their portfolio with a visually appealing project.

By the end of this guide, you'll have a fully responsive digital clock that updates every second automatically.

What You'll Learn

In this tutorial, you'll learn:

  • How to get the current time using JavaScript

  • How to display hours, minutes, and seconds dynamically

  • How to create SVG circular progress bars

  • How to center content perfectly inside circles

  • How to create glowing neon effects using CSS

  • How to build responsive layouts

Features of This Digital Clock

✔ Real-time clock updates every second

✔ 12-hour AM/PM format

✔ Animated circular progress indicators

✔ Glowing neon effects

✔ Fully responsive design

✔ Perfectly centered time display

Prerequisites

Before starting, you should know the basics of:

  • HTML

  • CSS

  • JavaScript

You will also need:

  • Visual Studio Code (or any code editor)

  • A modern web browser

Project Structure

Create the following files:

index.html
style.css
script.js

Step 1: Create the HTML Structure

Create an index.html file and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Digital Clock Using HTML CSS and JavaScript</title>

<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">

    <h1 class="title">Digital Clock</h1>

    <div id="time">

        <!-- Hours -->
        <div class="circle" style="--clr:#ff2972;">

            <svg>
                <circle cx="90" cy="90" r="70"></circle>
                <circle cx="90" cy="90" r="70" id="hh"></circle>
            </svg>

            <div class="dots h_dot"></div>

            <div class="time-text" id="hours">
                00
                <span>Hours</span>
            </div>

        </div>

        <!-- Minutes -->
        <div class="circle" style="--clr:#fee800;">

            <svg>
                <circle cx="90" cy="90" r="70"></circle>
                <circle cx="90" cy="90" r="70" id="mm"></circle>
            </svg>

            <div class="dots m_dot"></div>

            <div class="time-text" id="minutes">
                00
                <span>Minutes</span>
            </div>

        </div>

        <!-- Seconds -->
        <div class="circle" style="--clr:#04fc43;">

            <svg>
                <circle cx="90" cy="90" r="70"></circle>
                <circle cx="90" cy="90" r="70" id="ss"></circle>
            </svg>

            <div class="dots s_dot"></div>

            <div class="time-text" id="seconds">
                00
                <span>Seconds</span>
            </div>

        </div>

        <div class="ap">
            <div id="ampm">AM</div>
        </div>

    </div>

</div>

<script src="script.js"></script>

</body>
</html>

Step 2: Add CSS Styling

Create a style.css file and paste the following code:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

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

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#2f363e;
}

.container{
    text-align:center;
}

.title{
    color:#fff;
    font-size:3rem;
    font-weight:700;
    margin-bottom:50px;
}

#time{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:40px;
    flex-wrap:wrap;
}

.circle{
    position:relative;
    width:180px;
    height:180px;
}

.circle svg{
    position:absolute;
    top:0;
    left:0;
    width:180px;
    height:180px;
    transform:rotate(270deg);
}

.circle svg circle{
    fill:none;
    stroke:#191919;
    stroke-width:10;
}

.circle svg circle:nth-child(2){
    stroke:var(--clr);
    stroke-dasharray:440;
    stroke-dashoffset:440;
    transition:0.5s linear;
}

.time-text{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:#fff;
    text-align:center;
    z-index:10;
    font-size:2.5rem;
    font-weight:700;
}

.time-text span{
    margin-top:10px;
    font-size:0.8rem;
    font-weight:500;
    letter-spacing:3px;
    text-transform:uppercase;
}

.ap{
    color:#fff;
    font-size:2.5rem;
    font-weight:700;
}

.dots{
    position:absolute;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    z-index:5;
}

.dots::before{
    content:'';
    position:absolute;
    top:-6px;
    width:15px;
    height:15px;
    border-radius:50%;
    background:var(--clr);
    box-shadow:
        0 0 20px var(--clr),
        0 0 60px var(--clr);
}

@media(max-width:768px){

    .title{
        font-size:2rem;
    }

    .circle{
        width:150px;
        height:150px;
    }

    .circle svg{
        width:150px;
        height:150px;
    }

    .time-text{
        font-size:2rem;
    }

    .time-text span{
        font-size:0.7rem;
    }

    .ap{
        width:100%;
        text-align:center;
    }
}

Step 3: Add JavaScript Functionality

Create a script.js file and paste the following code:

const hours = document.getElementById("hours");
const minutes = document.getElementById("minutes");
const seconds = document.getElementById("seconds");
const ampm = document.getElementById("ampm");

const hh = document.getElementById("hh");
const mm = document.getElementById("mm");
const ss = document.getElementById("ss");

const hDot = document.querySelector(".h_dot");
const mDot = document.querySelector(".m_dot");
const sDot = document.querySelector(".s_dot");

function updateClock(){

    const now = new Date();

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

    let ap = h >= 12 ? "PM" : "AM";

    h = h % 12 || 12;

    hours.innerHTML = `${String(h).padStart(2,'0')}<span>Hours</span>`;
    minutes.innerHTML = `${String(m).padStart(2,'0')}<span>Minutes</span>`;
    seconds.innerHTML = `${String(s).padStart(2,'0')}<span>Seconds</span>`;

    ampm.innerHTML = ap;

    hh.style.strokeDashoffset = 440 - (440 * h) / 12;
    mm.style.strokeDashoffset = 440 - (440 * m) / 60;
    ss.style.strokeDashoffset = 440 - (440 * s) / 60;

    hDot.style.transform = `rotate(${h * 30}deg)`;
    mDot.style.transform = `rotate(${m * 6}deg)`;
    sDot.style.transform = `rotate(${s * 6}deg)`;
}

updateClock();
setInterval(updateClock, 1000);

How This Digital Clock Works

The JavaScript code uses the Date() object to retrieve the current time. Every second, the script updates the displayed hours, minutes, and seconds.

The SVG circles act as animated progress bars. Their stroke offset changes dynamically to represent the current time value, while glowing dots rotate around the circles to create a modern neon effect.

Final Output

After completing all three files, your digital clock will:

  • Display live time

  • Update automatically every second

  • Show animated circular progress indicators

  • Keep all text perfectly centered inside circles

  • Work smoothly on desktop and mobile devices

Conclusion

In this tutorial, you learned how to create a beautiful digital clock using HTML, CSS, and JavaScript. This project is a great way to practice JavaScript DOM manipulation, SVG animations, CSS Flexbox, and responsive web design.

You can further improve this project by adding:

  • Dark and light themes

  • Multiple time zones

  • Alarm functionality

  • Stopwatch and timer features

  • Date and calendar display

Happy Coding!

Technologies Used

HTML5 CSS3 JavaScript
Live Demo Source Code

Similar Projects

Quiz App
Beginner View Project
Simple Calculator
Beginner View Project
To-Do List App
Beginner View Project
Project Info
Difficulty: Beginner
Tech Stack: HTML5, CSS3, JavaScript
Created: June 26, 2026
Total Views: 7
Demo: View Demo
Source: View Code
Tags
HTML Projects CSS Projects JavaScript Projects Digital Clock Frontend Development Web Development JavaScript Tutorial HTML CSS JavaScript Beginner Projects Responsive Design
Share This Project