JavaScript Notes

Build a JavaScript Digital Clock - Step by Step Project Tutorial

Learn to build a live digital clock in JavaScript using Date object, setInterval, 12/24-hour toggle, AM/PM display, and smooth CSS styling.

What You'll Learn

How to use the JavaScript Date object to read the current time
How to use setInterval to update the clock every second
How to zero-pad numbers with String.padStart(2, '0')
How to toggle between 12-hour and 24-hour formats
How to display the day name and full date alongside the time

Project Overview

A digital clock reads the system time once per second and updates the DOM. The key insight is that the JavaScript Date object gives you the current moment every time you call new Date(), and setInterval calls your update function repeatedly.

Component Structure

How It Works — Flow Diagram

Step-by-Step Build

Step 1 — HTML Structure

html example

<div class="clock-wrapper">
  <div class="clock">
    <div class="time-display">
      <span id="hours">00</span>
      <span class="colon">:</span>
      <span id="minutes">00</span>
      <span class="colon">:</span>
      <span id="seconds">00</span>
      <span id="ampm" class="ampm"></span>
    </div>
    <div id="dateDisplay" class="date-display"></div>
    <button id="toggleFormat" class="toggle-btn">Switch to 12h</button>
  </div>
</div>

Step 2 — State

js example

let is24Hour = true;

const hoursEl   = document.getElementById("hours");
const minutesEl = document.getElementById("minutes");
const secondsEl = document.getElementById("seconds");
const ampmEl    = document.getElementById("ampm");
const dateEl    = document.getElementById("dateDisplay");
const toggleBtn = document.getElementById("toggleFormat");

Step 3 — Core Update Function

Example

function updateClock() { const now = new Date(); let hours = now.getHours(); // 0–23 let minutes = now.getMinutes(); // 0–59 let seconds = now.getSeconds(); // 0–59 let ampm = ""; if (!is24Hour) { ampm = hours >= 12 ? "PM" : "AM"; hours = hours % 12 || 12; // convert 0 → 12, 13 → 1, etc. } hoursEl.textContent = String(hours).padStart(2, "0"); minutesEl.textContent = String(minutes).padStart(2, "0"); secondsEl.textContent = String(seconds).padStart(2, "0"); ampmEl.textContent = ampm; updateDate(now); }

Step 4 — Date Display

Example

Step 5 — 12h / 24h Toggle

Example

toggleBtn.addEventListener("click", () => { is24Hour = !is24Hour; toggleBtn.textContent = is24Hour ? "Switch to 12h" : "Switch to 24h"; updateClock(); // update immediately so there's no 1-second delay });

Step 6 — Start the Clock

js example

updateClock();              // run immediately to avoid 1-second blank screen
setInterval(updateClock, 1000);

Console Output

Output

// At exactly 09:05:03 in 12h mode
hours   = 9  → padStart → "09"
minutes = 5  → padStart → "05"
seconds = 3  → padStart → "03"
ampm = "AM"
DOM: "09:05:03 AM"

// At exactly 14:30:00 in 24h mode
hours   = 14 → padStart → "14"
minutes = 30 → padStart → "30"
seconds = 0  → padStart → "00"
DOM: "14:30:00"

Final Output — What It Looks Like

Edge Cases to Handle

Situation	Expected Behavior
Midnight in 12h mode	`0 % 12 \	\	12 = 12` → shows "12:00:00 AM"
Noon in 12h mode	Shows "12:00:00 PM" (not 0)
Single-digit seconds	`padStart(2, "0")` → "09"
Tab in background	`setInterval` may throttle — clock catches up when visible
New year rollover	`new Date()` always reflects system time

Challenge Yourself

Timezone selector — let users pick a timezone via Intl.DateTimeFormat
Alarm — add a time picker and play a sound when the clock reaches that time
Blinking colon — toggle the : separator's visibility every 500ms
CSS flip animation — animate each digit flipping like a physical clock
World clocks — show 3 clocks for different cities simultaneously

Best Practices

Call updateClock() once before setInterval to show the time immediately
Always use padStart(2, "0") — never rely on the hour/minute/second being two digits
Use const for DOM references — they don't need to change
Keep updateClock() side-effect free except for DOM updates
Use Intl.DateTimeFormat for locale-aware date/time formatting in production

Continue the lesson path

Study next in this module

4 connected lessons

01Mini ProjectsBuild a JavaScript Counter Application - Step by Step Project TutorialLearn to build a counter app in JavaScript with increment, decrement, reset, min/max limits, and localStorage persistence. Great first JavaScript DOM project.02Mini ProjectsBuild a Dynamic Resume Builder in JavaScript - Step by Step TutorialLearn to build an interactive resume builder in JavaScript that generates a live HTML preview as you fill out form fields, with print and PDF export support.03Mini ProjectsBuild a JavaScript Image Carousel - Step by Step Project TutorialLearn to build an auto-playing image carousel in JavaScript with prev/next buttons, dot indicators, touch swipe support, and smooth CSS transitions.04Mini ProjectsBuild a JavaScript Email Validator - Step by Step Project TutorialLearn to build an email validator in JavaScript using regex, real-time feedback, common domain suggestions, and bulk validation. A great regex and DOM project.

PreviousBuild a JavaScript Counter Application - Step by Step Project Tutorial NextBuild a Dynamic Resume Builder in JavaScript - Step by Step Tutorial