Ever since I made my Italian dictionary browser extension, I have been eager to make other applications that I could personally use in my daily life. So when I was recently a passenger during a cross-country road trip, I decided to alleviate my boredom for a couple hours by building a JavaScript timer.

I was able to do this in a car traveling across Wyoming because all you need to run JavaScript and HTML/CSS is a web browser — not even an internet connection! Of course, I would need an internet connection when it came time to upload my app to GitHub and my own personal website, but I could build it all out with just my laptop in the middle of the nowhere.

My timer would be designed for HIIT workouts. HIIT stands for high-intensity interval training, and I became familiar with it while doing the free workouts available on Fitness Blender. The general pattern is, you do an exercise as hard as you can for 20 seconds, rest for 10 seconds, and repeat. You can also do 45-second intervals with 15-second rests. It’s supposed to be a very effective workout.

I was getting better at making up my own HIIT workouts, but it was inconvenient to do them without the fancy timer they had in the Fitness Blender videos, which timed out 20-second intervals and 10-second rests. So I decided to make my own timer to run in the browser while I did my own custom workouts.

When you press “Start” on my HIIT Timer, the screen turns pink and says “Go!” to tell you that it’s time to work out as hard as you can while it counts down from 20 seconds. When it hits 0, the screen turns cyan and says “Rest” while counting down from 10 seconds. And the cycle repeats. The changing background allows you to pay less attention to the exact number of seconds and just take your cue from the color.

You can also adjust the interval and break times in the upper right hand corner. You can do 100-second intervals and 5-second breaks if you want (though who knows if that still counts as HIIT!). The other typical interval time, as I mentioned above, is 45 seconds on, 15 seconds off.

Because the background color was consistently changing between cyan for rest and pink for exercise, the main body colors were transparent versions of white and black so that the timer appeared to come in shades of cyan or shades of pink. One of the design tips I’ve picked up is that you should initially design in shades of grey and then choose one highlight color, so I made an effort to apply that principle here.

Hopefully my HIIT Timer will allow me to squeeze in impromptu HIIT workouts in busy times. And when I next want to practice working in Swift/Xcode, I know what I’ll want to build: a HIIT Timer iPhone app!