Basic JavaScript: Pace Calculator

For a couple of races I’ve done in the past, I wanted to know beforehand which pace (in min/km) I needed to run to reach my goal. This way, I only needed to check my average pace during the run to make sure I reached my goal. However, most pace calculators you find online look something like this:

While they do what they say and ultimately work fine, there’s just something very unintuitive about them to me. I really only need it to do one thing. I know that I’m about to run a marathon and I want to finish that marathon in less than four hours. Which pace do I then need to maintain? In other words: enter distance and pace, out rolls the pace. Having found a good enough excuse for a little project, I set about making the calculator I wanted. Step number one, what’s the logic behind the calculation? Let’s see..

If you want to finish a marathon in 4 hours, that’s 240 minutes. A marathon is 42 kilometers. That means you have 240/42 = 5,7143 minutes to finish every kilometer. With this very basic formula, we can write the first bit of code. We need two input fields, which we’ll place in a form.

This bit of code gives us the two input fields in a form and a button. To make that button work, a script needs to run when it is clicked. That script contains the function you see below. In it, we take the value from both input fields and assign them to a variable. A third variable for pace, which is the division of the distance by the time. Next, we want to be able to print this pace in a sentence, so we add a variable that turns the integer into a string.

Finally, the function pastes that string into a sentence:

At this point, technically my goal is reached. We can input distance and time, click a button and out rolls the pace that we have to run at. However, nobody thinks in 5,7143 minutes. You think in 5 minutes and x seconds. The next challenge is formatting the result that way. This means the pace variable has to be split up. We want to extract the 5 first. Next, we want to recalculate 0,7143 minutes to seconds. To extract the 5, we convert 5,7143 to an integer using the parseInt() function. The input for this function is a string, which we already calculated in variable pace. We’ll assign this integer to a new variable called minutes. To extract everything after the decimal, we simply subtract the integer from the original time/distance calculation.

(5,7143 - 5 ) = 0,7143

The formula to recalculate 0,7143 to minutes is simply to multiply it by 60.

0,7143*60 = 42.858 seconds

We put this into a new variable, called seconds. To make this all as readable as possible, I wanted to round the seconds to one decimal. For this, we use the math.rounded() function. Simply putting the seconds variable into the function would round it to a whole number. To add an extra decimal, we multiply seconds by 10 to add an extra digit, and divide by 10 to get the actual result with one decimal. All of this brings us to the following function.

It once again prints the result variables into a sentence

At this point, my original goal was totally complete. The math works, and you get a simple pace output from your time and distance. However, you might want to change the distance to imperial units, and input hours instead of minutes. This sounded daunting to me at first (especially the metric to imperial conversion), but then I realized the math doesn’t change. So I decided to add two extra elements: a dropdown for kilometers/miles and one for hours/minutes. We can add these by adding selects with the different options to the original form.

Next is the additional math we need. Starting with the time format, the conversion from hours to minutes is of course very basic: if we want to allow someone to input 4 hours instead of 240 minutes, we need to multiply the result of time/distance by 60. This means we can largely reuse the function we used for calculating the pace based on minutes. As you can see, if this function is triggered it will print out the result into the same sentence as the minutes() function does.

Because the time/distance calculation does not change when you switch from kilometers to miles, the only thing needed to accommodate the kilometer/miles selector is a variable in the final output sentence. We can do this by taking the value of that selector and printing it into that sentence. The following function takes care of that.

We then update the output sentence to accommodate this value as follows.

Now we’re almost there. We need to add one more function. This function needs to pick the right time function (minutes versus hours) based on what was selected by the user. If hours was selected, the hours() function is triggered and if minutes was selected, the minutes() function is triggered.

The very final step, is to make the “calculate” button trigger the correct functions when it is pressed.

With all of this done, a user can select hours or minutes, input the distance in kilometers or miles and see their pace is in the correct format. If you want to see if what I’ve shared here is actually true and works as it should, you can check out my calculator here. If that still doesn’t convince you, feel free to check out my exact code here.

Hopefully this post helped you build your own calculator or you simply enjoyed seeing the logic and functions that make my pace calculator work. If you did enjoy it, please consider subscribing so you’ll occasionally receive posts like this one in your inbox. Thanks for reading!