In this blog, we’ll create a responsive digital clock that updates every second using JavaScript. This stylish clock design utilizes HTML, CSS, and JavaScript, making it an excellent project to practice dynamic DOM manipulation and responsive web design.
Whether you’re a beginner or looking to enhance your web development skills, this project will help you understand how to combine front-end technologies effectively.
What You Will Learn:
- Structuring HTML for a digital clock.
- Styling the clock with responsive CSS.
- Updating the clock dynamically using JavaScript.
- Creating reusable and readable JavaScript code.
Learn how to create analog clock with Javascript.
Video Tutorial
- To make learning even easier, I’ve created a video tutorial where I walk you through the entire process. In the video, you’ll learn:
- How to write the HTML structure for the clock.
- Styling the clock to make it visually appealing.
- Writing clean and reusable JavaScript to make the clock dynamic.
The Code
HTML
The HTML defines the structure of our digital clock. It includes three elements for hours, minutes, and seconds, separated by colons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
<title>Digital Clock</title>
</head>
<body>
<div class="clock">
<div id="hour"></div>
<span>:</span>
<div id="minute"></div>
<span>:</span>
<div id="seconds"></div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS
The CSS styles the clock and makes it responsive to different screen sizes.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
background-color: #3d91f5;
}
.clock {
width: 31.25em;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
height: 8em;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}
.clock div {
position: relative;
background-color: #ffffff;
height: 100%;
width: 3.2em;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5em;
border-radius: 0.4em;
box-shadow: 0 1em 2em rgba(0, 0, 0, 0.3);
letter-spacing: 0.05em;
}
.clock span {
font-weight: 800;
font-size: 2.5em;
color: #ffffff;
}
@media screen and (max-width: 31.25em) {
.clock {
font-size: 0.7em;
}
}
- The
.clockclass is styled with flexbox to align the hours, minutes, and seconds in a row. - The div elements for hours, minutes, and seconds have a clean design with rounded corners, shadows, and a smooth layout.
- Media queries ensure that the clock resizes proportionally on smaller devices.
JavaScript
The JavaScript dynamically updates the clock every second using the
setIntervalmethod.//Get the HTML elements for hours, minutes, and seconds const hour = document.getElementById("hour"); const minute = document.getElementById("minute"); const seconds = document.getElementById("seconds"); //Set an interval to update the clock every second const clock = setInterval( function time() { //Get the current date and time const date_now = new Date(); //Extract the hours, minutes, and seconds from current time let hr = date_now.getHours(); let min = date_now.getMinutes(); let sec = date_now.getSeconds(); //Ensure the hours, minutes, and seconds are always two digits hr = hr.toString().padStart(2, "0"); min = min.toString().padStart(2, "0"); sec = sec.toString().padStart(2, "0"); //Update the content of the respective HTML elements with current time hour.textContent = hr; minute.textContent = min; seconds.textContent = sec; }, 1000 //Run the function every 1000 milliseconds (1 second) );How It Works
- HTML Elements
- Three divs (
#hour,#minute,#seconds) are used to display the current time.
- Three divs (
- CSS Styling
- Flexbox aligns the clock components in a neat layout.
- Responsive design ensures the clock adjusts gracefully on smaller screens.
- JavaScript Functionality
- The
Dateobject retrieves the current time. padStart(2, "0")ensures each time unit is always two digits, even if it’s a single digit (e.g.,5becomes05).- The clock updates dynamically every second with
setInterval.
- The
Live Demo Ideas
Here are some creative ways to expand this clock:
- Custom Themes: Add buttons to switch between light and dark themes.
- Time Zone Selector: Display the time for different time zones.
- Alarm Feature: Add a feature to set and display an alarm.
- HTML Elements
Really helpful . Thanks