Digital Clock with HTML, CSS & JavaScript
10 DAYS 10 PROJECT CHALLENGE
Day #01
Project Overview
The Digital Clock is a great simple beginner-friendly project, which anyone can do as a beginner. HTML, CSS, and JavaScript were used to make this digital clock. The clock shows the current time in a neat little design, and constantly updates every second. It’s very simple to see and read the hours, minutes, and seconds on the clock.
This project is designed to help beginners practice basic frontend development concepts and is a fantastic way to learn some very fundamental frontend programming concepts. By making this clock, you can not only get used to JavaScript date functions, but also update your HTML with new information, and make your scripts run at a specific time interval. The project also provides a simple foundation for experimenting with different layouts, styles, and clock formats.
Key Features
- Real-Time Clock: The Digital Clock gives details about the current time and the time shows up on the website automatically so, that the user does not have to wait.
- Hours, Minutes, and Seconds: The clock shows the current hours, minutes and seconds clearly, so the current time is always known.
- Automatic Time Updates: The time on the clock changes automatically using JavaScript at specific intervals.
- Clean and Simple UI: The clock is built using a clean and simple user interface that does not have any extra elements and makes the primary goal viewing the current time.
- Responsive: The Digital Clock adapts to different screen sizes, allowing users to view the clock without any problem on desktops, tablets, and mobile devices.
- JavaScript Based Functionality: JavaScript handles the time calculation and updates the clock dynamically, demonstrating how frontend code can create real-time functionality.
- Easy Customization: The project has a simple structure, making it easy to customize the clock’s colors, fonts, layout, and overall appearance according to personal preferences.
What You’ll Learn
- Understand how to use the JavaScript Date object to get the current time.
- Learn how to update HTML elements dynamically using JavaScript.
- Learn how setInterval() can be used to execute a function at intervals.
- Learn how to display hours, minutes, and seconds in a web page.
- Practice connecting HTML, CSS, and JavaScript to create an interactive project.
- Understand the basics of creating a real-time web application.
- Practice creating a clean and responsive interface using CSS.
HTML Code
The HTML code below establishes the basic design of the Digital Clock. First of all, the style.css file is imported into the section of the code, so that CSS can add the relevant styling to the clock. The main content is placed inside the <div> with the “clock-container” class, which acts as the container for the clock and date.
Within this specific container, the <h1> element possesses the id=”clock”. It is this section of code that will display the current time by utilizing the JavaScript code. The <p> element contains the id=”date” and is responsible for displaying the current date. Lastly, the script.js file is imported at the end of the so that JavaScript can update the time and date.
<!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
The CSS code styles the Digital Clock and centers it on the page. The .clock-container class makes the clock centered by using Flexbox, sets the height of the clock to 100vh (so that it takes the entire viewport height) and sets the dark blue background, white color, and digital clock font. The #clock selector styles the clock text, setting the font size, color, and spacing between the clock digits. The #date selector styles the date text, setting its font size to something smaller than the clock text and making it slightly transparent.
/* 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
JavaScript will update our clock in real-time. First off, we’ll utilize the built-in Date object to get the current date/time in the system. We’ll also extract hours, minutes, and seconds from that Date object. Then, we can convert it to a 12-hour clock and add leading zeros for consistency. After that, we can also format the current date and pass both values to our clock and date elements, respectively, to see the result below. Lastly, we’ll use setInterval() to do all of the above every second and continuously update our clock.
// 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>