Menu

1 / 2

A Pomodoro timer in 20 lines of vanilla JS

DEV Community: html·htmlput·about 23 hours ago
#GGabA5hd
#devto2#devto#dev#time#start
Reading 0:00
15s threshold

Most first JavaScript projects die in setup. You pick a framework, install a toolchain, and by the time anything appears on screen you've forgotten what you wanted to learn.

A Pomodoro timer is the opposite. It needs exactly three things: a heartbeat, a piece of state, and a screen. That's it. No libraries, no build step, no backend. One HTML file, a handful of lines of JavaScript, and you end up understanding the core loop behind nearly every interactive UI ever built.

The three moving parts

1. setInterval is the heartbeat. The entire timer is this line:

timer = setInterval ( tick , 1000 );

Enter fullscreen mode

Exit fullscreen mode

Every second, the browser calls tick() . Everything else is decoration around that one repeating pulse.

2. One variable is the entire state. let left = FOCUS — seconds remaining. 25 x 60 = 1500. There is no state object, no store, no reducer. The timer's whole memory is a single number counting down.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.