Back to Projects Beginner

Digital Clock

Build a real-time clock that ticks every second. You'll learn how JavaScript reads the current time and updates the page automatically.

HTML, CSS, JavaScript ~1-2 hours to build Free source code

What You'll Learn

How JavaScript reads the current time using the Date object
How to use setInterval() to run code every second
How to pad single-digit numbers with a leading zero (e.g. 9 → 09)
How to update text on the page without refreshing it (textContent)
How to display AM/PM time and the full date

How It Works

The Date object gives us the current time

Every time you call new Date() in JavaScript, it captures the current date and time down to the millisecond. We can pull out hours, minutes, and seconds from it separately.

setInterval keeps updating the clock

We use setInterval(updateClock, 1000) to call our clock function every 1000 milliseconds (1 second). This is what makes the numbers change in real time without refreshing.

We format and display the time

We grab the hour, minute, and second values, pad them with a leading zero if needed (so "9" becomes "09"), then update the text in our HTML elements.

Source Code

HTML Structure

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-wrapper">
    <div class="clock">
      <div class="time" id="time">00:00:00</div>
      <div class="date" id="date"></div>
      <div class="ampm" id="ampm">AM</div>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS Styling

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  min-height: 100vh; display: flex; align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
  font-family: 'Segoe UI', monospace;
}
.clock {
  text-align: center; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 24px;
  padding: 48px 64px; backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.time {
  font-size: clamp(3rem, 10vw, 6rem); font-weight: 700;
  color: #ffffff; letter-spacing: 8px;
  text-shadow: 0 0 40px rgba(255,255,255,0.3);
}
.date {
  font-size: 1.1rem; color: rgba(255,255,255,0.6);
  margin-top: 16px; letter-spacing: 2px; text-transform: uppercase;
}
.ampm {
  display: inline-block; background: rgba(240,154,15,0.2);
  color: #f09a0f; font-size: 0.85rem; font-weight: 700;
  padding: 4px 16px; border-radius: 50px; letter-spacing: 2px;
  margin-top: 12px; border: 1px solid rgba(240,154,15,0.3);
}

JavaScript Logic

JavaScript

function updateClock() {
  const now = new Date();
  let hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();
  const ampm = hours >= 12 ? 'PM' : 'AM';

  // Convert to 12-hour format
  hours = hours % 12 || 12;

  // Add leading zeros (e.g. 9 becomes "09")
  const pad = (n) => String(n).padStart(2, '0');

  document.getElementById('time').textContent =
    `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
  document.getElementById('ampm').textContent = ampm;

  const days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
  const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  document.getElementById('date').textContent =
    `${days[now.getDay()]}, ${months[now.getMonth()]} ${now.getDate()}, ${now.getFullYear()}`;
}

updateClock();
setInterval(updateClock, 1000);