⏰ Create a Digital Clock with Date Using HTML, CSS & JavaScript
📘 Introduction
In this tutorial, we will create a Digital Clock with Current Date using HTML, CSS, and JavaScript. The clock automatically updates every second and also displays the current day and date with a calendar icon.
This project is perfect for beginners who want to learn how JavaScript can update web page content dynamically using real-time data.
- Learn JavaScript Date object
- Display live time updates
- Show the current date dynamically
- Practice DOM manipulation
🛠Technologies Used
- HTML – Structure of the webpage
- CSS – Styling the clock interface
- JavaScript – Updating time and date dynamically
⚙ How the Digital Clock Works
The clock uses the Date() object in JavaScript to get the current time and date. The setInterval() function runs every second and updates the clock on the webpage.
- Retrieve the current time
- Format hours, minutes, and seconds
- Retrieve the current date
- Display both time and date
- Update every second automatically
💻 Complete Code (Copy & Run)
<!DOCTYPE html>
<html>
<head>
<title>Digital Clock with Date</title>
<style>
body{
margin:0;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:black;
font-family:Arial;
}
.container{
text-align:center;
background:#111;
padding:40px 70px;
border-radius:12px;
box-shadow:0 0 25px #00ffcc;
}
.clock{
font-size:60px;
color:#00ffcc;
margin-bottom:10px;
}
.date{
font-size:22px;
color:white;
}
</style>
</head>
<body>
<div class="container">
<div class="clock" id="clock">00:00:00</div>
<div class="date" id="date">📅 Loading date...</div>
</div>
<script>
function updateClock(){
let now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();
if(hours < 10) hours = "0" + hours;
if(minutes < 10) minutes = "0" + minutes;
if(seconds < 10) seconds = "0" + seconds;
let time = hours + ":" + minutes + ":" + seconds;
document.getElementById("clock").innerHTML = time;
let options = { weekday:'long', year:'numeric', month:'long', day:'numeric' };
let today = now.toLocaleDateString(undefined, options);
document.getElementById("date").innerHTML = "📅 " + today;
}
setInterval(updateClock,1000);
updateClock();
</script>
</body>
</html>
🎯 What You Will Learn
- Using JavaScript Date object
- Updating webpage content dynamically
- Creating real-time applications
- Basic UI styling with CSS
🚀 Ideas to Improve This Project
- Add AM / PM format
- Add dark/light mode
- Create an analog clock
- Add background animations
- Show multiple time zones
🎉 Conclusion
Creating a digital clock with date is one of the best beginner projects to understand how JavaScript works with real-time data and dynamic webpage updates.
Try customizing the design, colors, and fonts to build your own unique clock.
Happy Coding! ⏰📅
