Digital Clock with HTML, CSS & JavaScript
10 DAYS 10 PROJECT CHALLENGE
Day #01
Project Overview
This project is a Digital Clock built using HTML, CSS, and JavaScript.
It displays the current time dynamically and updates every second. The clock is styled to look modern, simple, and responsive, making it a great beginner-friendly JavaScript project to learn DOM manipulation, date/time handling, and styling with CSS.
Key Features
- Real-time update – The clock automatically updates every second.
- Date Display – Show today’s date below the clock.
- Day Indicator – Highlights the current day of the week.
- Responsive Design – Works on desktop, tablet, and mobile.
- AM/PM Indicator – For 12-hour format clocks.
HTML 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>
<!-- Clock Container -->
<div class="clock-container">
<h1 id="clock"></h1>
<p id="date"></p>
</div>
<script src="script.js"></script>
</body>
</html>CSS Code
/* Clock Container Styling */
.clock-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background: #002252;
color: #ffffff; /* White text */
font-family: 'Courier New', monospace; /* Digital font look */
}
/* Time Styling */
#clock {
font-size: 60px;
font-weight: bold;
margin: 10px 0;
color: #eea731;
}
/* Date Styling */
#date {
font-size: 22px;
opacity: 0.9;
}
Javascript Code
// Function to update the clock
function updateClock() {
let now = new Date();
// Extract time values
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();
// AM/PM format
let ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12 || 12; // Convert 24hr → 12hr format
// Add leading zeros
hours = hours.toString().padStart(2, '0');
minutes = minutes.toString().padStart(2, '0');
seconds = seconds.toString().padStart(2, '0');
// Format time
let timeStr = `${hours}:${minutes}:${seconds} ${ampm}`;
// Format date
let options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
let dateStr = now.toLocaleDateString(undefined, options);
// Display in HTML
document.getElementById("clock").innerText = timeStr;
document.getElementById("date").innerText = dateStr;
}
// Update clock every second
setInterval(updateClock, 1000);
// Run immediately on page load
updateClock();
Your Task
Create a similar project on your own and share your CodePen link in the comments.
I’ll review your work and share my feedback as a reply!
Related Projects
Day 3 : To-Do List App
Users can add, mark complete, and delete tasks.
Concepts: Arrays, LocalStorage.
Day 4 : Image Slider / Carousel
A slider that automatically or manually slides through images.
Concepts: CSS transitions, DOM traversal.
Day 5 : Quiz App
A multiple-choice quiz with score tracking.
Concepts: Loops, conditionals.
Hello,
I tried rebuilding this example clock and extended it into a luxury-style clock
with analog design, pendulum animation, and improved UI.
Here is my project link: [ https://github.com/Shivaji-Shill/luxury-clock.git ]
I would really appreciate your feedback.
Thank you.
https://luxury-clock-5f1df1.netlify.app/
Sorry maam for my mistake. Please approve my comment
Wow. Digital Clock is actually looking beautiful. Keep doing creative work. 😍😍😍
https://luxury-clock-5f1df1.netlify.app/
Great!!
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Calculator-App</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background: #002252;
}
.container {
background: black;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
width: 260px;
}
#display {
color: white;
}
#display {
width: 92%;
height: 50px;
font-size: 1.5rem;
text-align: right;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 8px;
background: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
height: 50px;
font-size: 1.2rem;
border: none;
border-radius: 8px;
cursor: pointer;
transition: 0.2s;
}
button:hover {
background: #ebaa25;
}
.operator {
background: #007bff;
color: white;
}
#equals {
grid-column: 4 span ;
background: #28a745;
color: white;
}
#display {
color: white;
}
.clear {
background: #dc3545;
color: white;
}
</style>
</head>
<body>
<div class=“container”>
<div>
<input type=“text” id=“display” disabled>
</div>
<div class=“grid”>
<button class=“btn”>7</button>
<button class=“btn”>8</button>
<button class=“btn”>9</button>
<button class=“btn operator”>/</button>
<button class=“btn”>4</button>
<button class=“btn”>5</button>
<button class=“btn”>6</button>
<button class=“btn operator”>*</button>
<button class=“btn”>1</button>
<button class=“btn”>2</button>
<button class=“btn”>3</button>
<button class=“btn operator”>–</button>
<button class=“btn”>0</button>
<button class=“btn”>.</button>
<button class=“btn clear”>C</button>
<button class=“btn operator”>+</button>
<button class=“calBtn” id=“equals”> = </button>
</div>
<!– <button class=”calBtn” id=”equals”> = </button> –>
</div>
<script>
const display = document.querySelector(“input”);
const btns = document.querySelectorAll(“.btn”);
const clearBtn = document.querySelector(“.clear”);
const calBtn = document.querySelector(“.calBtn”);
let currentVal = “”;
btns.forEach((btn) => {
btn.addEventListener(“click”, () => {
currentVal += btn.textContent;
display.value = currentVal;
});
});
clearBtn.addEventListener(“click”, () => {
currentVal = ”;
display.value = currentVal;
});
calBtn.addEventListener(“click”, (e) => {
try {
display.value = eval(currentVal);
} catch (err) {
display.value = “Error”;
currentVal = “”;
}
});
</script>
</body>
</html>