Digital Clock Project for Beginners Using HTML, CSS & JavaScript

Build Your Own Real-Time Clock in Just a Few Minutes!

Want to build a simple, real-time digital clock using your web development skills? This beginner-friendly project will show you how to create a live digital clock with HTML, CSS, and JavaScript — no libraries required!

It’s the perfect mini project to understand DOM manipulation, real-time updates, and basic styling.

🎯 What You’ll Learn

How to get the current system time in JavaScript
How to format and display time
How to update elements in real time
How to style your clock with CSS

📁 Project Setup

Create the following files:

lua
digital-clock/
│
├── index.html
├── style.css
└── script.js

🧱 Step 1: HTML Structure

html
<!-- index.html -->
<!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-container">
    <h1>🕒 Digital Clock</h1>
    <div id="clock">00:00:00</div>
  </div>

  <script src="script.js"></script>
</body>
</html>

🎨 Step 2: CSS Styling

css
/* style.css */
body {
  font-family: 'Segoe UI', sans-serif;
  background: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.clock-container {
  background: white;
  padding: 30px 50px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  text-align: center;
}

#clock {
  font-size: 48px;
  font-weight: bold;
  color: #333;
  margin-top: 15px;
}

💡 Step 3: JavaScript Logic

javascript
// script.js

function updateClock() {
  const now = new Date();

  let hours = now.getHours();
  let minutes = now.getMinutes();
  let seconds = now.getSeconds();

  // Add leading zero if less than 10
  hours = hours < 10 ? "0" + hours : hours;
  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;

  const time = `${hours}:${minutes}:${seconds}`;
  document.getElementById("clock").textContent = time;
}

// Update every second
setInterval(updateClock, 1000);

// Run immediately on load
updateClock();

✅ How It Works

new Date() gets the current system time
Hours, minutes, and seconds are extracted and formatted
The clock is updated every second using setInterval()
The DOM element #clock shows the current time

🛠️ Bonus Ideas

Add AM/PM toggle
Add date display (e.g. Monday, 20 June 2025)
Use digital font style for aesthetics
Turn it into a screen saver or widget

📦 Conclusion

This Digital Clock project is an excellent beginner exercise for practicing:

JavaScript date/time handling
Real-time UI updates
Clean and responsive UI design

Use this as a foundation to create alarms, countdowns, or full dashboard interfaces.

💬 Want a dark mode, flip animation, or clock with date and timezone? Comment below and I’ll help you upgrade it!