Build a Pomodoro Timer With AI and Make It Yours

August 26, 2026

A Pomodoro timer counts down work sessions, usually 25 minutes, followed by short breaks. An AI assistant can write one as a single HTML file in a few minutes. The harder part is making it behave properly: browsers slow down timers in background tabs, which is the most common reason homemade timers drift or stop.

Knowing that problem in advance puts you ahead of most first attempts.

Decide how your timer should work

The classic technique uses 25 minutes of focus, a 5 minute break, and a longer break after four rounds. These numbers are a convention, not a rule, so make them adjustable. Write down what you want:

• Start, pause and reset buttons.
• Settings for focus length, short break and long break.
• A display of minutes and seconds, large enough to read from across a desk.
• A sound or visual signal when a session ends.
• A count of completed sessions today.

The prompt

Build a Pomodoro timer as one HTML file with CSS and JavaScript inside.
Defaults: 25 minute focus, 5 minute short break, 15 minute long break after 4 focus sessions. Let me change all three numbers.
Show a large mm:ss display, Start/Pause and Reset buttons, the current mode (Focus, Short break, Long break), and a count of completed focus sessions today.
When a session ends, play a short beep and switch to the next mode, waiting for me to press Start.
Show the remaining time in the browser tab title.
Make the countdown accurate even if the tab is in the background: compute remaining time from the clock, not by subtracting one each second.
Store my settings in localStorage.
Plain, calm design, readable on a phone.

The instruction about the clock is the important one. A naive timer subtracts one every second using a repeating call. Browsers may delay those calls in hidden tabs, so the timer falls behind. Computing the remaining time from the actual end time avoids the drift.

Test it properly

Waiting 25 minutes to test is impractical, so build in a way to speed things up. Set the focus length to 1 minute for testing and check:

1. The countdown ticks once per second and looks correct.
2. Pause stops it, and Start resumes from the same time.
3. Reset returns to the full length for the current mode.
4. When the time reaches zero, the beep plays and the mode changes.
5. After four focus sessions, the long break appears.

Then test the background-tab problem. Start a 2 minute focus session, switch to another tab for a minute and a half, and come back. The display should show about 30 seconds left, not 1 minute 30. If it is wrong, tell the assistant exactly what you saw and ask for the end-time approach.

Sound and notifications

Browsers block sound until the user has interacted with the page, which is why the beep should play after you have pressed Start at least once. If you hear nothing, mention that to the assistant and ask it to check this restriction.

Desktop notifications are possible, but they require permission from the user and behave differently across browsers. Add them only if you need them, and test in the browser you will actually use. A visible change in the page title or color is often enough.

Customize it

When the base works, personalize it, one request at a time:

• A progress ring or bar that shrinks as time passes.
• A text field for “what am I working on,” saved with each session.
• A small history showing sessions per day for the past week.
• A theme that changes color between focus and break.

Each change is easy to see and low risk. Retest the countdown after any change that touches the timer logic, since that is where bugs hide.

Common bugs and how to describe them

The timer runs twice as fast. This usually means two counters were started. Say: “After I press Start twice, the timer runs faster.”

Pause then Start jumps the time. The pause logic is not storing the remaining time. Describe the time before and after.

Settings reset on reload. Ask the assistant to check that the saved values are read when the page loads.

The beep plays several times. The end-of-session check is firing repeatedly. Report how many times you hear it.

Specific descriptions with numbers produce better fixes than “it’s broken.”

Keep a short log of sessions

If you add a field for what you are working on, you get a simple record of where your time goes. After a week, look at it with a clear question in mind: did the tasks you planned get focus sessions, or did small requests take over? You do not need charts for this. A plain list with dates, task names and session counts is enough to notice patterns.

If you build the log, make sure it stores only what you typed and keeps the data in your browser. Add an export button for the list so a cleared browser does not erase your history. Test the export by opening the file in a spreadsheet and checking that the dates and task names look right.

Using it well

A timer helps only if you use it. Keep the page open in a pinned tab, and decide in advance what counts as a break, such as standing up or looking away from the screen. If 25 minutes does not suit you, adjust it. The method works because it divides effort into short stretches, not because of the exact number.

What to do next

Build the version above, set focus to one minute, and run the five-point test plus the background-tab test. Then restore the normal lengths and use the timer for a full day. At the end, note one thing that annoyed you, such as a quiet beep or tiny buttons, and fix it in your next session. When you are happy with it, publish it on a free static host so you can use it from any device.