Free Pomodoro timer, and how to make your own

Your own focus timer, in about half an hour

You'll describe the timer to a free AI assistant, paste what it writes into a file, and open it in your browser. Different lengths, your favourite sounds, your colours.

• A big, clear countdown timer: 25 minutes focus, 5 minutes short break, 15 minutes long break after every 4 sessions
• Start, pause and reset buttons, plus keyboard shortcuts
• A chime when each session ends, and the time showing in your browser tab
• A counter of how many sessions you've finished today
• Optional background sounds like rain or café noise
• Your own colours, lengths and style

Good for: students revising for exams, remote workers who drift into email, and writers, artists and anyone who struggles to get started.

What you need

Build it in six steps

1. Ask for the timer

   Copy this prompt into your AI assistant:

   Copy this promptCopy

   I don't know how to code. Please make me a Pomodoro timer that runs in a web browser.
   
   Requirements:
   - ONE single HTML file (HTML, CSS and JavaScript together), no external libraries, works offline. I will save it and double-click it.
   - 25 minute focus sessions, 5 minute short breaks, and a 15 minute long break after every 4 focus sessions. It should move to the next session automatically when I press Start.
   - Big, easy-to-read countdown in the middle of the screen, with the session name above it ("Focus", "Short break", "Long break").
   - Start/Pause and Reset buttons.
   - Show the remaining time in the browser tab title, so I can see it from other tabs.
   - Keep accurate time even if the tab is in the background.
   - Calm, minimal design. The background colour should change between focus (warm red) and breaks (soft green).
   
   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 timer.html. Double-click it and press Start. That's a working Pomodoro timer you made.

2. Add sounds

   Copy this promptCopy

   That works, thank you. Please add sounds, generated with the Web Audio API so no sound files are needed:
   - A gentle three-note chime when a focus session ends
   - A different, brighter chime when a break ends
   - A volume slider and a mute button. Remember my settings.
   
   Also show a desktop notification when a session ends (ask for permission the first time).
   
   Send me the complete updated file.

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

   Note: browsers only allow sound after you've clicked something on the page, so press Start once before expecting chimes.

3. Count your sessions

   Copy this promptCopy

   Please add a session counter: a row of tomato icons (or circles) under the timer that fills in as I finish focus sessions today. Show "Today: 3 sessions, 1 h 15 min focused". Save it in localStorage and reset it automatically at midnight.
   
   Send me the complete updated file.

4. Make the lengths adjustable

   25 minutes doesn't suit everyone. Some people prefer 50/10.

   Copy this promptCopy

   Please add a small settings panel (opened with a gear icon) where I can change the focus, short break and long break lengths in minutes, and how many sessions before a long break. Include quick presets: "Classic 25/5", "Long 50/10" and "Short 15/3". Remember my choice.
   
   Send me the complete updated file.

5. Add background sounds

   Copy this promptCopy

   Please add optional background sounds to help me focus: rain, gentle café chatter and brown noise. Generate them with the Web Audio API if possible, so the file still works offline with no sound files. Add buttons to choose one or turn them off, and a separate volume slider. They should play only during focus sessions and fade out for breaks.
   
   Send me the complete updated file.

   If the AI says café chatter can't be generated by code, that's fine. Ask it to keep the rain and brown noise and skip that one, or to explain how to add a free sound file in the same folder.

6. Make it yours

   Copy this promptCopy

   Please restyle the timer as [choose one: a cosy lo-fi study room with a dark purple background and soft glowing text / a clean white design with one thin progress ring around the countdown / a fun design with a cartoon tomato that slowly gets eaten as time runs out].
   
   Add keyboard shortcuts: Space to start or pause, R to reset, S to skip to the next session. Show them in small text at the bottom.
   
   Send me the complete updated file.

   Tip: pin it. In Chrome or Edge, drag the open tab to the left and right-click it to choose Pin, so your timer is always there.

Quick fixes

When I switch to another tab for a few minutes, the timer falls behind. Please make it calculate the remaining time from the clock (the end time) instead of counting down each second, and send me the complete file.

Twist it into something else

A timer is one of the most adaptable projects there is. Swap the first prompt to make:

The quickest way to feel what building with AI is like

There are plenty of timer websites, but they come with ads, sign-ups or features you'll never touch. Yours opens instantly, works offline, and does exactly what you want. It's also the quickest way to feel what building with AI is like, and once you've done this you're ready for anything else on the site.

What to build next