LearnBuildbeginner30 min2 steps

Build a clock

A digital clock that updates every second — the smallest possible introduction to timers, dates, and the event loop.

You will build

A digital clock on a web page that updates every second.

You will learn

setInterval, the Date object, how the browser schedules code to run later.

Prerequisites

Comfortable with HTML files and the very basics of JavaScript (variables, functions, the DOM). The calculator tutorial is exactly the right warmup.

A clock that updates every second is the smallest possible asynchronous program. It is also a useful clock.

Step 18 min

Display the current time once

GoalReload the page and the current time appears. It is wrong a second later, but it is correct on load.

index.htmlHTML

<!doctype html>
<html>
  <body>
    <h1 id="clock">--:--:--</h1>
    <script>
      const clock = document.getElementById('clock');
      const now = new Date();
      clock.textContent = now.toLocaleTimeString();
    </script>
  </body>
</html>

Step 210 min

Tick

GoalThe clock updates every second on its own. You do not have to do anything.

Concept · js/async

Catalog

setInterval

`setInterval(fn, ms)` asks the browser to call `fn` every `ms` milliseconds. Your code keeps running; the browser handles the schedule.

JAVASCRIPT

setInterval(() => {
  console.log('tick');
}, 1000);

index.html (inside <script>)JAVASCRIPT

function render() {
  clock.textContent = new Date().toLocaleTimeString();
}
render();
setInterval(render, 1000);

Milestone

You wrote your first piece of asynchronous code.

Most of what makes a web app feel alive — animations, network requests, autosave, websockets — uses the same idea you just used. "Run this later, repeatedly, while my main code does other things."

Concepts covered · 3

Functionspracticed The DOMpracticed Async / awaitintroduced

Pass it on

Share on X Follow on GitHub

Discussion

Be the first to ask

Your questions stay private with the team. We can pin answers to share with everyone.

No pinned answers yet for this tutorial.