Free visual timer for kids and the classroom, and how to make your own

A timer children can read at a glance

You'll describe the timer to a free AI assistant, paste what it writes into a file, and open it in your browser. Then add presets, a gentle sound, colours and a full-screen mode for the classroom board, one step at a time.

• A coloured disc that shrinks clockwise as the time runs down, like the classic red-disc timers
• One-tap presets from 1 to 60 minutes, plus your own minutes and seconds
• Start, pause, reset and a quick "+1 minute" button
• A soft chime or bell at the end, made by the browser with no sound files
• A label such as "Tidy-up time", colour choices and a full-screen mode for the board

Good for: teachers and teaching assistants timing tasks and transitions, parents managing screen time, bedtime and turn-taking, children who find clocks hard to read, and anyone who works better when they can see time passing.

What you need

Build it in five steps

Step 1 gives you a simple version that works, and each step after it adds more. The tool at the top of this page is roughly what you'll have once you've done every step. Yours will look a bit different, because the AI writes its own version each time.

1. Ask for the visual timer

   Copy this prompt into your AI assistant:

   Copy this promptCopy

   I don't know how to code. Please make me a visual timer for children that runs in a web browser.
   
   Requirements:
   - ONE single HTML file (HTML, CSS and JavaScript together), no external libraries, no internet needed. I will save it and double-click it.
   - A big white circle with a red wedge inside it. When the timer starts, the wedge is a full circle. As time runs out it shrinks clockwise, like a slice of pie being eaten, until it disappears. Draw it with SVG.
   - Big, easy-to-read minutes and seconds under the circle, like 4:59.
   - Buttons for 1, 2, 5 and 10 minutes, and Start, Pause and Reset buttons.
   - Work out the time left from the real clock (Date.now()), not by counting ticks, so it stays accurate.
   - When it reaches zero, show "Time's up!" in big friendly letters.
   - A clean design: a dark background, big buttons and bright colours.
   
   Please give me the complete file in one code block, then tell me in simple steps how to save and open it.

   Copy the code, paste it into your text editor, and save it as visual-timer.html. Double-click it, press 1 minute, then Start. The red wedge should shrink.

2. Add more times and a +1 minute button

   Real lessons need more than four choices, and sometimes the class needs just a little longer.

   Copy this promptCopy

   That works, thank you. Please add:
   - Preset buttons for 1, 2, 3, 5, 10, 15, 20, 30, 45 and 60 minutes, in a neat grid.
   - Two small boxes to type your own minutes and seconds, with a "Set" button (Enter works too).
   - A "+1 min" button that adds a minute, even while the timer is running.
   - Show the time left in the browser tab's title while it runs, so I can see it from another tab.
   - Press the Space bar to start or pause.
   - Remember the last time I chose in localStorage.
   
   Send me the complete updated file.

   Always ask for the complete file. Replace everything in visual-timer.html, save, and refresh the tab (F5 or Cmd+R).

3. Add a gentle sound at the end

   A loud alarm makes a class jump. A soft chime does the job without the shock.

   Copy this promptCopy

   Please add a sound when the time is up:
   - Three choices: "Soft chime" (three gentle rising notes), "Bell" (a ding, three times) and "No sound".
   - Make the sounds with the Web Audio API (oscillators), so no sound files are needed.
   - Create the AudioContext when I press Start, so tablets and phones allow the sound.
   - Play a short sample when I pick a sound, so I can hear it first.
   - Make the circle pulse gently three times when the time is up.
   - Animation frames stop in background tabs, so also check the time with setInterval every half a second, so the sound still plays on time if I switch tabs.
   - Remember my choice in localStorage.
   
   Send me the complete updated file.

4. Add colours, a label and clock marks

   Different colours suit different jobs, and a label tells the class what the time is for.

   Copy this promptCopy

   Please make it look more like a classroom timer:
   - Colour choices for the wedge: red, orange, green, blue and purple, as round swatches.
   - An optional text label above the circle, such as "Tidy-up time" or "Reading", that I can type into.
   - Little tick marks around the edge of the circle like a clock face, with bigger marks every fifth one.
   - A tick box to hide the numbers, for younger children who only need the picture.
   - Remember the colour, label and number setting in localStorage.
   
   Send me the complete updated file.

5. Make it work on the board and on phones

   Copy this promptCopy

   I want to use this on a classroom board and on a tablet or phone:
   - A "Full screen" button that hides the settings and makes the circle, label and time as big as the screen allows. Use the Fullscreen API, and if the device doesn't support it (like an iPhone), cover the whole page instead. Escape exits.
   - On phones, put the settings under the timer, and make sure nothing scrolls sideways.
   - Make the circle stay perfectly round at any size.
   - If the tab has been in the background, catch up straight away when it comes back.
   
   Send me the complete updated file.

Quick fixes

Twist it into something else

A shrinking disc works for far more than lessons. Change the first prompt to make:

Your timer, your colours, no adverts

Many visual timer apps cost money, need an account, or show adverts at the worst moment. Yours is one small file that works without the internet, on the board or a tablet, and does exactly what your class or family needs. You choose the sounds, the colours and the times, and you can make a new version for every routine. It's also a gentle first project: one circle, one clock and a few buttons.

Questions people ask

What to build next