How to Create a Digital Clock with Date using HTML, CSS & JavaScript
In this tutorial, you’ll learn how to create a beautiful and responsive Digital Clock using HTML, CSS, and JavaScript. This project is perfect for beginners looking to practice DOM manipulation and real-time functionality in JavaScript.
🎬 Watch the Tutorial
🔗 GitHub Source Code
You can find the complete source code on my GitHub repo here:
🧱 Step 1: HTML Structure
Here’s the base HTML layout for the 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>
<div class="clock">
<div class="time">
<span class="hour">00</span>:<span class="minute">00</span>:<span class="second">00</span> <span class="period"></span>
</div>
<div class="date">
<span class="month">Jan</span> <span class="today">10</span>,<span class="year">2025</span>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
🎨 Step 2: CSS Styling
This CSS will center the clock and style it beautifully on both desktop and mobile screens.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #282c34;
}
.clock {
font-family: 'Courier New', Courier, monospace;
color: #61dafb;
font-size: 5rem;
text-align: center;
}
.date {
font-size: 2rem;
color: #ffffff;
margin-top: 20px;
}
@media (max-width: 600px) {
.clock { font-size: 3rem; }
.date { font-size: 1.2rem; }
}
⚙️ Step 3: JavaScript Logic
The JavaScript will update the time and date every second using setInterval().
function updateClock() {
let date = new Date();
let hour = date.getHours();
let minute = date.getMinutes();
let seconds = date.getSeconds();
let month = date.getMonth();
let today = date.getDate();
let year = date.getFullYear();
let period = hour >= 12 ? 'PM' : 'AM';
if (hour >= 12) {
hour = hour - 12;
if (hour === 0) hour = 12;
}
hour = hour < 10 ? '0' + hour : hour;
minute = minute < 10 ? '0' + minute : minute;
seconds = seconds < 10 ? '0' + seconds : seconds;
document.querySelector('.hour').textContent = hour;
document.querySelector('.minute').textContent = minute;
document.querySelector('.second').textContent = seconds;
document.querySelector('.period').textContent = period;
const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
document.querySelector('.month').textContent = monthNames[month];
document.querySelector('.today').textContent = today < 10 ? '0' + today : today;
document.querySelector('.year').textContent = year;
}
setInterval(updateClock, 1000);
updateClock(); // Call initially
✅ Result Preview
Here’s what the final result should look like after following all the steps. It shows current time and date and updates every second.
💡 Bonus Tips
- Try adding day of the week using
getDay() - Use different fonts or themes for styling
- Try showing time in 24-hour format as an option
If you liked this project, don’t forget to subscribe to the YouTube channel and check out the full project collection on GitHub!
.png)
