Build a clock
A digital clock that updates every second — the smallest possible introduction to timers, dates, and the event loop.
A digital clock on a web page that updates every second.
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.
<!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.
setInterval
`setInterval(fn, ms)` asks the browser to call `fn` every `ms` milliseconds. Your code keeps running; the browser handles the schedule.
setInterval(() => { console.log('tick');}, 1000);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
More like this
Your first Python program
Python reads almost like English. Write a small converter, see its output, and open the project in /code to keep editing.
Build a program with AI
The vibe-coder path for Go: the idioms you must recognise, the prompt, and the review that catches dropped errors.
Your first C++ program
C++ trades a little ceremony for a lot of speed and control. Write a first program, learn the compile-then-run cycle, and open it in /code.
Liked this one?
Pass it on
Discussion
Be the first to ask
Your questions stay private with the team. We can pin answers to share with everyone.
Sign in to ask a question privately on this tutorial.
Sign inNo pinned answers yet for this tutorial.