I have long meant to get around to making a countdown timer page. It’s a handy thing to have for workshops and for workouts or pomadoro/productivity. There have been enough options out there that kept me from doing it. This pomadoro one is actually really nice. I could also link to a point in the timeline of many YouTube countdown timers to do something that basically worked. That did have the risk of hitting ads etc. The ads on a number of the sites have gotten more aggressive, etc. etc.

Mainly because I’m trying to figure out the boundaries of AI code generation (and imitating D’Arcy and John Udell) . . . I figured I’d make a page that does what I want.

Round one

Turns out I used Claude to generate the initial code. You can see that code here and look at the CodePen version 1 I put up here.¹

My prompt was . . .

I’d like to make a javascript count down timer. Please provide the code with an element with the id of timer that shows the minutes and seconds counting down. When the time runs out, turn the screen red and make an alert sound.

²

So I did need to know how to put the div in the HTML portion of the page but it even tells me to do that. Once that’s done, the countdown timer works. It starts automatically which isn’t optimal.

Round two

I now provide additional instruction.

add a start and stop button for the timer

That gives us some HTML and javascript changes. It all works as planned even though I asked without proper punctuation, capitalization, or politeness.³

Round three

Now I just wandered away from the AI stuff because I started to come up with ideas about how I really wanted this to work. That’s kind of the fun part for me. I want to skip the boring basics and then start actually solving the more interesting problems myself. I know that’s not for everyone. I don’t know what the activity parallel for “one person’s trash is another person’s treasure” but that’s one of the things that’s bound to come up with this kind of automation.

The other portion is just having an idea of what might be. If you know nothing of coding and have limited experience with web development, I imagine it’s hard to have the language to describe what you want to happen. I want to be able to set the timer via the URL. I know to use the term URL parameter but what happens if I don’t?

Provide the code to allow me to set the timer via the URL.

It did a good job even without the terminology and took a slightly different pattern than I did.

Round four – freestyling

At this point, I’d just started rolling on my own.

Audio

I decided I didn’t like the jarring alert or the screen turning red. I wanted something calmer.

I thought it’d be fun to use an AI voice to read a AI-generated haiku about ending an activity. I ended up just chopping a portion of one of several haikus to give me “Hands pause, silence falls,/The last page turned, task complete.” Clearly, not great but good enough for me.

Now I wanted a voice to read it with the appropriate gravitas. I couldn’t remember what AI voice generator I used previously so I just looked to see what OpenAI could do and found the text-to-speech API playground. After some attempts to slow down the speech,⁴ I was still unhappy with the pauses between lines. Really all I got was distorted speech. I tried some different punctuation and eventually changed the text to “Hands pause . . . . . . . . . . . .silence falls. . . . . . . . . . . . .The last page turned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . task complete.” Clearly, not optimal but good enough for this one-time use.

Progression bar

I also thought it’d be nice to do a progression bar. I did something like this in the past. All I’m doing is setting a div, moving it entirely off the page and then updating it’s position each time the timer updates. Since the bar’s width is 100% of the view width and it’s absolute position is 100% of the view width to the left, we can update that with something like this.

bar.style.left = -(timeLeft/totalTime)*100+'vw';

A bit of CSS smooths out the transitions.

    transition: all .5s ease;

Now, I thought it might help to show a waveform when the audio played as a way to further draw attention. I found Wave Surfer JS which was perfect. A bit of playing around and I had exactly what I wanted.

Content editable

I thought that it might be nice to set the timer via the timer in addition to the URL parameter option. I could set the timer to be content editable. Then I just needed to set something to watch for changes to that element and reset things (including the URL parameter in case you want to share the URL after setting the time this way).

document.getElementById('timer').addEventListener('input', function(){
    let manualTime = this.innerHTML;    
    let pieces = manualTime.split(":");//chop the mins/seconds into pieces (this is my last resort - Papa Roach)
    let mins = new Number(pieces[0]);
    let secs = new Number(pieces[1]);
    totalTime = (mins * 60)+secs;
    timeLeft =  (mins * 60)+secs;
    let url = new URL(window.location.href);
    let decimalSecs = secs/60;
    let cleanSecs = decimalSecs.toString().substring(2, 5);//remove leading zero and decimal
    url.searchParams.set('min', `${mins}.${cleanSecs}`);
    // // Update the URL without reloading the page
    window.history.pushState({}, '', url);

})

It’s not bullet proof (it needs the colon) but this is really mainly a tool for me, just a home cooked app.

So?

For me, the LLM code generation fits well in this type of small, targeted tasks. I feel like it’d still be a challenging task for someone who doesn’t know anything about web development. I could be wrong there though. It’s hard to think that the knowledge you’ve built up is not necessary. AI would seem to eat at the easy tasks beginners usually take on to develop experience and allow middle knowledge programmers to solve certain limited problems faster.

It may be that coding with AI is like those powered bikes I see around our neighborhood now. Awesome that people can ride bikes who might not be able to handle the hills etc. without motor assistance. It makes bikes a more legitimate option for travel for many more people. I worry about the kids riding them as they seem able to go faster than is sensible⁵ and might be missing out on some of the other benefits of riding bikes (like exercise). I imagine making these bikes is an entirely different ecological impact than building a normal bike. When one of these bikes breaks, it’ll also be considerably harder for an individual to fix. Stuff like this is messy.