Build a Digital Clock Web App

📋 What You'll Need

A text editor
A web browser
No installs needed

Get the current time with JavaScript

The Date object gives you the current time — setInterval updates it every second.

function getTimeParts() {
  const now = new Date();
  return {
    hours:   now.getHours(),
    minutes: now.getMinutes(),
    seconds: now.getSeconds(),
    day:     now.toLocaleDateString('en-GB', { weekday:'long', day:'numeric', month:'long', year:'numeric' }),
  };
}

setInterval(() => {
  const t = getTimeParts();
  console.log(`${t.hours}:${String(t.minutes).padStart(2,'0')}:${String(t.seconds).padStart(2,'0')}`);
}, 1000);

Full clock with HTML, CSS, and format toggle

Monospace digits for stable layout, and a button to switch 12h/24h.

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Digital Clock</title>
  <style>
    :root[data-theme="dark"]  { --bg:#0f172a; --card:#1e293b; --text:#f8fafc; --sub:#94a3b8; --btn:#334155; }
    :root[data-theme="light"] { --bg:#f1f5f9; --card:#ffffff; --text:#0f172a; --sub:#64748b; --btn:#e2e8f0; }
    * { margin:0; padding:0; box-sizing:border-box; transition:background 0.3s,color 0.3s; }
    body { font-family:'Segoe UI',monospace; background:var(--bg); color:var(--text); min-height:100vh; display:flex; align-items:center; justify-content:center; }
    .clock { text-align:center; background:var(--card); padding:48px 56px; border-radius:24px; box-shadow:0 20px 60px rgba(0,0,0,0.2); }
    .time { font-size:5rem; font-weight:800; letter-spacing:4px; font-variant-numeric:tabular-nums; line-height:1; margin-bottom:6px; }
    .ampm { font-size:1.4rem; margin-left:8px; color:var(--sub); vertical-align:top; margin-top:12px; display:inline-block; }
    .date { color:var(--sub); font-size:0.95rem; margin-bottom:28px; font-family:'Segoe UI',sans-serif; }
    .controls { display:flex; gap:10px; justify-content:center; }
    .btn { padding:9px 20px; border:none; border-radius:8px; background:var(--btn); color:var(--text); font-size:0.82rem; font-weight:600; cursor:pointer; }
  </style>
</head>
<body>

<?php require_once __DIR__ . '/../promo_banner.php'; ?>

  <div class="clock">
    <div class="time"><span id="time">00:00:00</span><span class="ampm" id="ampm"></span></div>
    <div class="date" id="date"></div>
    <div class="controls">
      <button class="btn" onclick="toggle24()">12/24h</button>
      <button class="btn" onclick="toggleTheme()">Theme</button>
    </div>
  </div>
  <script src="clock.js"></script>
</body>
</html>

// clock.js
let use24h = false;

function tick() {
  const now = new Date();
  let h = now.getHours();
  const m = String(now.getMinutes()).padStart(2,'0');
  const s = String(now.getSeconds()).padStart(2,'0');

  let ampm = '';
  if (!use24h) {
    ampm = h >= 12 ? 'PM' : 'AM';
    h = h % 12 || 12;
  }

  document.getElementById('time').textContent = `${String(h).padStart(2,'0')}:${m}:${s}`;
  document.getElementById('ampm').textContent  = ampm;
  document.getElementById('date').textContent  =
    now.toLocaleDateString('en-GB', { weekday:'long', day:'numeric', month:'long', year:'numeric' });
}

function toggle24()    { use24h = !use24h; tick(); }
function toggleTheme() {
  const root = document.documentElement;
  root.dataset.theme = root.dataset.theme === 'dark' ? 'light' : 'dark';
}

tick();
setInterval(tick, 1000);

💡 Tip: setInterval fires every 1000ms but may drift over time because it does not account for execution time. For a long-running clock, use setTimeout inside a self-scheduling function and correct the next delay based on the actual elapsed time.

🎉 You Did It!

A live UI that updates itself every second — the foundation of dashboards, live feeds, and counters. The same setInterval pattern powers progress bars, typing indicators, and auto-save timers.

Browse More Tutorials

🕐 Build a Digital Clock Web App

🎯 What You'll Build

📋 What You'll Need

Get the current time with JavaScript

Full clock with HTML, CSS, and format toggle

🎉 You Did It!

🕐 Build a Digital Clock Web App

🎯 What You'll Build

📋 What You'll Need

Get the current time with JavaScript

Full clock with HTML, CSS, and format toggle

🎉 You Did It!

Found something wrong?

Thanks — got it!