A Timer for Interval Training

Last year I have tried home workouts since the gym was shutdown for about four months. During that time, I realized that it is harder to maintain the challenge and effectiveness of the workout since few training equipments are available at home. Later I found out that time is a crucial factor to increase the challenge and effectiveness of the training. By incorporating interval training to my workout schedule, I started to see the gains! During this period, I used intervaltimer.com to create my own interval training timer. This website (mobile app also available) allows users to build and save their own training timer. It is great, but I’m a bit upset with its user interface since it imposes many limitations on how a user can customize the intervals of the timer. In addition, some of the features on the website is locked in the associated mobile app. This has led me to the idea of creating an open source alternative to intervaltimer.com.

Recently, the outbreak of COVID-19 in Taiwan spare me quite a lot of time, and I have spent some of the time picking up JavaScript. Last Friday (Jun 4), I was randomly browsing the HTML Drag and Drop API. This reminded me of the interval training timer. After watching a video about building sortable drag and drop elements with vanilla JavaScript, I decided that it is time to carry out the project of building an interval timer.

It has been almost two years since I wrote an app in vanilla JavaScript¹. These days, I have been creating apps with JavaScript frameworks like Vue. It is great, but working with vanilla JavaScript is also pleasuring. Switching back and forth between two different ways of creating web apps is joyful, as it gives you the opportunity to think about programming in two quite distinct ways!

Draggable Interval Timer

To keep the timer minimalist², I wrote it in vanilla JavaScript, HTML & CSS (no server required of course). The most important feature of this timer is its dragging functionality, which gives users the flexibility of sorting the exercise blocks at will. Another useful feature is that custom timers created by the user are sharable through URLs. This makes up for the unavailability of the drag and drop API on touch screen devices (e.g. mobile phones) since a user can just create a timer on the PC/laptop and access the timer with a link on her mobile phone. Here is an example!

The timer is available at timer.yongfu.name and the source code is on GitHub. I’m looking forward to seeing your custom interval timers!