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."
More like this
Build your first web page
Hand-write a small, semantic page — a heading, a paragraph, a list — then open the same project in /code and make it yours.
Build a calculator
Most courses teach variables before you have anything to put in one. We are going to skip that pain. We build the calculator first; the concepts show up when the calculator demands them.
Style a card with CSS
The quickest way to feel CSS: take a plain card and give it depth, spacing, and a button — editing the same project the Deep and Reference tiers use.
Liked this one?
Pass it on
Discussion
Be the first to ask
Your questions stay private with the author. The author 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.