Behind the Build

How I Built Learn Clock Time

Steve Vogt · May 2026 · 6 min read

My second-grader brought home a math worksheet that wanted her to read twelve different analog clocks and write the times. She knew "three o'clock" and "half past six," and that was about it. I sat next to her at the kitchen table for an hour drawing clock faces on scratch paper and pointing at the hands. By the end she could tell time, but I knew the same hour would happen again next week with the next worksheet, and the week after that.

I went looking for an app that would let her drag the hands around, see the time update, and quiz her until it stuck. Most of what I found was either a paywall worksheet generator, a noisy education platform with mascots and login screens, or a pretty but static clock with no interaction at all. So one weekend I built one.

The Goal

One page. A big analog clock that a kid can grab. Hour hand, minute hand, both draggable. The digital time and the time-in-words update with every move. Some quick-set buttons for the times kids see most often. A game with a few difficulty levels. Read aloud, because hearing "quarter past four" while looking at the clock is what makes the connection.

And, because my own kid asked for it on day two, more than one language. Her cousin in Madrid was visiting and she wanted to show him. That was the moment the project went from a one-language clock to an eight-language clock.

Drag the Hands, Not the Buttons

The first version had buttons that incremented and decremented the hour and minute. It worked, but it felt nothing like a real clock. The second version let you drag the hands directly on the clock face, and the difference was night and day. Kids understood it without any explanation. They would grab a hand, swing it around, and watch the digital readout change. The whole abstraction collapsed into a physical motion.

The drag handler does pointer math, not mouse-specific math, so it works the same on a laptop, a tablet, and a phone. The minute hand snaps to five-minute increments by default, which is what most early-elementary worksheets use, but a parent or teacher can flip on a snap-to-the-minute mode for older kids. The hour hand moves continuously between numbers (when it is 3:45, the hour hand is three-quarters of the way to 4, not still pointing at 3) because that is what real clocks do, and getting that detail wrong defeats the whole point.

Time-in-Words Across Eight Languages

This is the part that took the longest, by a lot. Telling time in English is straightforward: "half past three," "quarter to five." Telling time in other languages is full of small landmines, and every language has its own.

Each language is its own function, not a translation table. A translation table would have been faster to write and would have produced wrong sentences in five of the eight languages. The functions handle the singular/plural shifts, the next-hour reference for German, the script-with-counter format for Japanese and Chinese, and the standard "and" vs "minus" structure for the Romance languages.

Read Aloud Without a Login

The read-aloud feature is the most useful single thing in the app for a kid practicing alone, and it is also the feature with the most variable quality. It uses the browser's built-in speechSynthesis API, which is free, offline, and requires no account. The downside is that voice quality varies wildly across devices. On a recent iPhone or Mac, the Spanish, French, German, and Japanese voices sound like real people. On an older Android tablet or a Chromebook from school, they can sound robotic.

I added a voice picker that shows every voice the device exposes for the selected language and lets the parent choose the one that sounds best to them. The choice is saved in localStorage so the kid hears the same voice every time. I briefly thought about using a paid TTS API for higher-quality audio, but that would break offline support, add a recurring cost, and require an account or API key. The browser voices are good enough for telling time, and they are free for everyone forever.

Four Levels Named After Trees

The game has four difficulty levels: Sprout (ages 5-6, hours and half hours only), Sapling (6-7, plus quarter past and quarter to), Tree (7-8, five-minute increments), and Star (8+, any minute). The progression follows the way Common Core actually introduces telling time across kindergarten through third grade. The names are because my kids hated calling them "Easy, Medium, Hard, Hardest." Sprout sounds nicer, and a kid who is on Sprout does not feel like the dumb one.

Each level rotates between three question types: read the analog clock and pick the time, find the clock face that matches a written time, and pick the right words to describe a clock. Mixing types stops the kid from memorizing one pattern and gaming the score.

Teaching Tips for Adults

Down at the bottom of the page there is a teaching tips section written for parents and teachers. Things like "say the hour first, then the minutes" and "the big hand is the minute hand because there are more minutes." It is the cheat sheet I wish someone had handed me at the kitchen table that first night. I also include the specific Common Core standards each part of the app addresses (1.MD.B.3 for hour and half hour, 2.MD.C.7 for five-minute intervals and AM/PM, 3.MD.A.1 for to-the-minute and elapsed time), so a teacher can drop the link into a lesson plan without having to verify what it covers.

Privacy

No accounts, no analytics, no tracking pixels. The whole site is one HTML file, served as a static page. Voice and language preferences are stored in localStorage on the device. There is a small donation panel for parents who want to support the project, but no part of the app gates content behind it. The donation copy says "one-time or monthly support" rather than naming any payment processor by name, because the right answer for the user is whichever one they already have set up on their phone.

The same shape as my other education project, Spanish Spelling Test: a single HTML file, no backend, browser TTS, full offline support, and no data leaving the device. School-issued tablets often have filtered or unreliable internet, and an app that works offline sidesteps the whole problem.

What is Next

Two things on the list. First, an "elapsed time" mode where the app shows two clock faces and asks how much time is between them. That is the next Common Core skill after telling time and it would extend the same UI naturally. Second, a teacher mode similar to Spanish Spelling Test, with a shareable link that throws a class a ten-question quiz and shows results on a dashboard. Whether I build that depends on whether teachers ask for it.

If you also have a kid practicing Spanish spelling, the rest of my projects are at the homepage. They are all free, all privacy-first, and all built for the same reason: I or someone in my house needed it and nothing free was good enough.

Try Learn Clock Time
Free. No signup. Works offline. Eight languages.
Visit Learn Clock Time
More Projects
Finance
BridgeToFI
FIRE planning calculator
Rewards
Churning Hub
Credit card bonus tracker
Travel
Delta Price Tracker
Free flight price drop alerts
Shopping
Amazon Price Tracker
Post-purchase price monitoring
Education
Spanish Spelling Test
Spelling practice with auto-grading
Reference
The Gas Map
U.S. gas prices by state
Markets
Bitcoin Price Board
Real-time BTC/USD tracker