Build a Real-Time Digital Clock using HTML, CSS, and JavaScript
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.jsStep 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</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 id="hh" cx="90" cy="90" r="70"></circle>
</svg>
<div class="dots h_dot"> </div>
<div id="hours" class="time-text">00 Hours</div>
</div>
<!-- Minutes -->
<div class="circle" style="--clr: #fee800;">
<svg>
<circle cx="90" cy="90" r="70"></circle>
<circle id="mm" cx="90" cy="90" r="70"></circle>
</svg>
<div class="dots m_dot"> </div>
<div id="minutes" class="time-text">00 Minutes</div>
</div>
<!-- Seconds -->
<div class="circle" style="--clr: #04fc43;">
<svg>
<circle cx="90" cy="90" r="70"></circle>
<circle id="ss" cx="90" cy="90" r="70"></circle>
</svg>
<div class="dots s_dot"> </div>
<div id="seconds" class="time-text">00 Seconds</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:1.2rem;
font-weight:700;
}
.time-text span{
margin-top:10px;
font-size:0.7rem;
font-weight:500;
letter-spacing:3px;
text-transform:uppercase;
}
.ap{
color:#fff;
font-size:1.7rem;
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:1.5rem;
}
.circle{
width:150px;
height:150px;
}
.circle svg{
width:150px;
height:150px;
}
.time-text{
font-size:1.2rem;
}
.time-text span{
font-size:0.6rem;
}
.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
Live Output
See the project in action below. This is the live preview of the code you just learned.
Similar Projects
