Building a Reaction Time Test in JavaScript

How I built a browser-based reaction time test with multi-round scoring, audio feedback, and localStorage — all in plain JS. I recently shipped a reaction time test — the classic "click when the screen turns green" game. It runs entirely in the browser with zero dependencies. In this post I'll walk through how it works, what made it interesting to build, and the exact patterns I used. How the game works Player clicks the zone to start a round The screen turns red — player must wait After a random delay (1.5 – 4 seconds), the screen turns green Player clicks as fast as possible — their reaction time is recorded in ms After 5 rounds, a final results panel shows average, best, worst, and a percentile rating If the player clicks while waiting (before green), they get an "early click" penalty and must retry. The state machine Everything hinges on a single state variable. This keeps conditional logic clean and prevents weird edge cases. let state = ' idle ' ; // idle | waiting | ready | done