A good first building block

Live digital clock

A readable clock that updates once a second using your local time.

HTMLCSSJavaScriptNo dependencies

Live preview

Explore the result below

HTML

<main class="clock">
  <p>YOUR LOCAL TIME</p>
  <time id="clock" aria-label="Current local time">--:--:--</time>
  <span id="date"></span>
</main>

CSS

:root { font-family: system-ui, sans-serif; color: #704519; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #fff3de; padding: 24px; box-sizing: border-box; }
.clock { text-align: center; }
.clock p { font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.clock time { display: block; font-size: clamp(30px, 10vw, 54px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.clock span { display: block; margin-top: 16px; font-size: 14px; }

JavaScript

const clock = document.querySelector("#clock");
const date = document.querySelector("#date");
function updateClock() {
  const now = new Date();
  clock.textContent = now.toLocaleTimeString([], { hour12: false });
  clock.dateTime = now.toISOString();
  date.textContent = now.toLocaleDateString([], { weekday: "long", month: "short", day: "numeric" });
}
updateClock();
setInterval(updateClock, 1000);

Read the complete HTML document

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>My code example</title>
<style>
:root { font-family: system-ui, sans-serif; color: #704519; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #fff3de; padding: 24px; box-sizing: border-box; }
.clock { text-align: center; }
.clock p { font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.clock time { display: block; font-size: clamp(30px, 10vw, 54px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.clock span { display: block; margin-top: 16px; font-size: 14px; }
</style>
</head>
<body>
<main class="clock">
  <p>YOUR LOCAL TIME</p>
  <time id="clock" aria-label="Current local time">--:--:--</time>
  <span id="date"></span>
</main>
<script>
const clock = document.querySelector("#clock");
const date = document.querySelector("#date");
function updateClock() {
  const now = new Date();
  clock.textContent = now.toLocaleTimeString([], { hour12: false });
  clock.dateTime = now.toISOString();
  date.textContent = now.toLocaleDateString([], { weekday: "long", month: "short", day: "numeric" });
}
updateClock();
setInterval(updateClock, 1000);
</script>
</body>
</html>

A little guide to making it yours

Copy the code and save it in a file named example.html.
Open the file in your browser to see the complete example.
Change the text and structure in the HTML.
Adjust the colors and spacing in the CSS, or experiment in the playground.

How it works

Uses the browser clock and local timezone. Avoid an aria-live region for updates every second, which would interrupt screen reader users.

Historical purpose: Recovered 2014 digital_clock.htm detail establishes the clock purpose; this local Date-based implementation is newly authored and contains no archived script.

Troubleshooting and limits

The clock reads the device clock and timezone; it does not contact a time server. Enable JavaScript and correct your device settings if the display differs from local time. Browser background tabs can delay interval updates.

This is newly authored code. It uses system fonts and no external assets.

Keep the ideas going