Join 50,000+ Builders
Weekly insightsReal-world content100% SecureZero spam
Build a dynamic real-time digital clock using JavaScript with clean UI and responsive design.
In this tutorial, you’ll learn how to create a real-time digital clock using JavaScript. This project demonstrates how to update time dynamically using intervals and DOM manipulation.
It’s a beginner-friendly project that helps you understand JavaScript timing functions and live UI updates.
This project focuses on building a real-time digital clock that updates every second using JavaScript. It displays hours, minutes, and seconds dynamically while maintaining a clean and responsive UI.
The implementation uses simple logic combined with DOM updates to create a smooth and accurate time display.
A breakdown of my approach in developing a lightweight JavaScript solution focused on functionality, simplicity, and performance.
Designed a clean and minimal clock interface using HTML, CSS, and Bootstrap.
Implemented JavaScript logic using setInterval() to update time every second.
Ensured smooth real-time updates without flickering or delay.
Preparing IDE Environment...
Create a basic HTML structure with an element where the digital clock will be displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Real-Time Crafting a Digital Clock with HTML, CSS, JS & Bootstrap 5
</title>
<meta
name="description"
content=" Real-Time Digital Clock: Build with HTML, CSS & JS | Discover how to craft a real-time digital clock using HTML, CSS, JS, and Bootstrap 5. "
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-12">
<div class="clock-heading">
<h1 id="clock-heading">
Real-Time Crafting a Digital Clock with HTML, CSS, JS & Bootstrap
5
</h1>
</div>
<div class="clock">
<div class="clock-face">
<div class="clock-number" data-number="12"></div>
<div class="clock-number" data-number="1"></div>
<div class="clock-number" data-number="3"></div>
<div class="clock-number" data-number="5"></div>
<div class="clock-number" data-number="6"></div>
<div class="clock-number" data-number="7"></div>
<div class="clock-number" data-number="9"></div>
<div class="clock-number" data-number="11"></div>
<div class="hand hour-hand"></div>
<div class="hand minute-hand"></div>
<div class="hand second-hand"></div>
<div class="center-cap"></div>
</div>
<div class="clock-bg">
<img src="clock.png" alt="clock" />
</div>
</div>
</div>
</div>
</div>
<script src="init.js"></script>
</body>
</html>
Style the clock layout to make it visually appealing and centered on the screen.
body,
html {
font-family: "Roboto", sans-serif;
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center;
transition: background 0.5s;
margin: auto;
text-align: center;
}
.clock {
position: relative;
width: 280px;
height: 280px;
/* Copper color */
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
.clock-face {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
background: white;
z-index: 99999999;
top: 30px;
left: 8px;
}
.clock-number {
position: absolute;
font-size: 2em;
color: black;
font-weight: 600;
}
.clock-number:nth-child(1) {
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 12 */
.clock-number:nth-child(2) {
top: 22%;
left: 82%;
transform: translate(-50%, -50%);
}
/* 1 */
.clock-number:nth-child(3) {
top: 50%;
right: 10%;
transform: translate(50%, -50%);
}
/* 3 */
.clock-number:nth-child(4) {
bottom: 22%;
left: 82%;
transform: translate(-50%, 50%);
}
/* 5 */
.clock-number:nth-child(5) {
bottom: 10%;
left: 50%;
transform: translate(-50%, 50%);
}
/* 6 */
.clock-number:nth-child(6) {
bottom: 22%;
left: 18%;
transform: translate(-50%, 50%);
}
/* 7 */
.clock-number:nth-child(7) {
top: 50%;
left: 10%;
transform: translate(-50%, -50%);
}
/* 9 */
.clock-number:nth-child(8) {
top: 22%;
left: 18%;
transform: translate(-50%, -50%);
}
/* 11 */
.clock-number::before {
content: attr(data-number);
}
.hand {
position: absolute;
bottom: 50%;
left: 50%;
transform-origin: bottom center;
transform: translateX(-50%);
transition: transform 0.5s ease-in-out;
}
.hour-hand {
width: 6px;
height: 70px;
background-color: #333;
}
.minute-hand {
width: 4px;
height: 90px;
background-color: #666;
}
.second-hand {
width: 2px;
height: 100px;
background-color: #b87333;
/* Copper color */
}
.center-cap {
position: absolute;
width: 15px;
height: 15px;
background-color: #333;
border-radius: 50%;
z-index: 10;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.clock-bg img {
max-width: 100%;
height: auto;
width: 100%;
}
.clock-bg {
height: 400px;
width: 400px;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: -66px;
right: 0;
}
.clock-heading {
max-width: 70%;
text-align: center;
margin: auto;
color: #ffff;
margin-bottom: 110px;
margin-top: -20px;
}
.heading-day {
color: black;
}
.heading-night {
color: white;
}
.clock-face:before {
content: "";
display: block;
border: 1px solid;
border-radius: 100%;
height: 160px;
width: 160px;
margin: 53px auto;
}
@media only screen and (max-width: 768px) {
.clock-bg {
height: 327px;
width: 327px;
left: -55px;
bottom: -10px;
}
.clock {
width: 220px;
height: 220px;
}
.heading-night {
font-size: 20px;
}
}Use JavaScript to fetch the current time and update it every second using
function updateClock() {
const hourHand = document.querySelector(".hour-hand");
const minuteHand = document.querySelector(".minute-hand");
const secondHand = document.querySelector(".second-hand");
const heading = document.getElementById("clock-heading");
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
// Calculate the rotation for each hand
const secondDegrees = (seconds / 60) * 360;
const minuteDegrees = (minutes / 60) * 360 + (seconds / 60) * 6;
const hourDegrees = (hours / 12) * 360 + (minutes / 60) * 30;
// Apply the rotation to each hand
secondHand.style.transform = `rotate(${secondDegrees}deg)`;
minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
// Update background and heading color based on the time
let backgroundImage = "";
let headingClass = "";
if (hours >= 6 && hours < 12) {
backgroundImage = 'url("morning.jpg")'; // Replace with your morning image URL
headingClass = "heading-day";
} else if (hours >= 12 && hours < 16) {
backgroundImage = 'url("afternoon.jpg")'; // Replace with your afternoon image URL
headingClass = "heading-day";
} else if (hours >= 16 && hours < 20) {
backgroundImage = 'url("evening.jpg")'; // Replace with your evening image URL
headingClass = "heading-day";
} else {
backgroundImage = 'url("night.jpg")'; // Replace with your night image URL
headingClass = "heading-night";
}
document.body.style.backgroundImage = backgroundImage;
heading.className = `heading ${headingClass}`;
}
// Run the updateClock function every second
setInterval(updateClock, 1000);
// Initial call to set the time immediately
updateClock();
Experience the project in action. Explore the live demo to see all features, performance, and user interface in a real-world environment.
Transform your ideas into powerful digital solutions with expert development services. Specializing in high-performance web applications.
<Frontend Developer>
HTML • CSS • JS • React • WordPress
Building creative digital experiences ⚡
Built with emphasis on speed, scalability, and clean code standards.
