Build a Digital Clock using HTML, CSS & JavaScript

⏰ Digital Clock using HTML, CSS & JavaScript

Let’s build a stylish and responsive digital clock using just HTML, CSS, and JavaScript. This is a great project to practice real-time DOM updates and the setInterval() method.

📁 HTML Code

<div class="clock-container">
  <div id="clock">00:00:00</div>
</div>

🎨 CSS Styling

body {
  margin: 0;
  height: 100vh;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: monospace;
}

.clock-container {
  background: #000;
  padding: 40px 60px;
  border-radius: 10px;
  box-shadow: 0 0 20px #0f0;
}

#clock {
  color: #0f0;
  font-size: 48px;
  letter-spacing: 4px;
}

⚙️ JavaScript Code

function updateClock() {
  const now = new Date();
  const h = String(now.getHours()).padStart(2, '0');
  const m = String(now.getMinutes()).padStart(2, '0');
  const s = String(now.getSeconds()).padStart(2, '0');
  document.getElementById('clock').textContent = `${h}:${m}:${s}`;
}

setInterval(updateClock, 1000);
updateClock();

🚀 Live StackBlitz Demo

💡 Bonus Features

• Add AM/PM mode toggle
• Switch to 24-hour/12-hour format
• Show current date below the time
• Add animations or background changes every hour

📚 Conclusion

Creating a digital clock is a great way to practice JavaScript's time APIs and improve your styling skills. You can also use this as a component inside dashboards or web apps as a widget!