JC Logo

Workout Timer

With Rep Counter and Logging

Workout Timer Mobile Comps

Overview

So I like to do this workout where I do 400 squats, and I time them. I also need to remember my past times because I tried to beat my time with each workout. To do this, I was using the stopwatch on my phone and taking a screenshot of my time after each workout. I was also having to count the reps in my head, sometimes I'd use quarters to keep track, in sets of 25. I got tired of doing that and decided to build my own stopwatch that counted reps, and also saved my times so I could easily see my progress. I use it now and it works great! I just need to add the ability to set the workout name so you can track things like squats, pushups, and pullups separately.

Technology

I built this project with React, it also uses React Router. It's relatively simple, but the key is the way it properly keeps time. Most any Google search for a javascript timer will give you code that will not keep time accurately. Every example does a settimeout of 1000 and adds to the amount of seconds elapsed. You actually need to get a unix timestamp when the timer is started and then use the timeout as a mechanism to update the UI. The function inside the timeout will get another timestamp and subtract the start time in order to get the actual amount of time elapsed. It stores the workout logs in local storage so it doesn't require a login.