Why is 5:30 pace not 5.3?

Because time is base-60, not base-10! 30 seconds is half a minute, so it's 0.5. We'll show you how to fix this in code.

Can I add Kilometer support?

Yes! In Step 3, we add a simple dropdown to switch between Miles and Kilometers.

Nope! This entire tool runs instantly in your browser using simple JavaScript.

Build Your Own Pace Calculator (10 Easy Steps)

Hello Runners & Coders! 🏃‍♂️💻

Have you ever tried to divide "30 minutes and 15 seconds" by "3.1 miles" in your head? It's a nightmare.

That's because Time Math is weird.

In normal math, 0.5 is halfway to 1.
In time math, :30 is halfway to a minute.
If you type 5.50 in a calculator, it's NOT 5 minutes 50 seconds. It's 5 minutes and 30 seconds!

Today, we will build a Speedometer for Runners (Pace Calculator) that handles this messy math for us.

🎯What You Will Learn

✓Understand why Time Math is tricky (Base-60)
✓Convert 'MM:SS' strings into pure seconds
✓Calculate Pace using the formula: Time / Distance
✓Format seconds back into 'MM:SS'
✓Handle logic for both Miles and Kilometers

Step 1: The Design (HTML) 🎨

We need 3 boxes:

Time: How long did you run?
Distance: How far did you go?
Pace: The result (Speed).

html

<div class="calculator-box">
    <h2>🏃 Pace Calculator</h2>
    
    <label>Time (Minutes : Seconds)</label>
    <div class="time-inputs">
        <input type="number" id="min" placeholder="30"> : 
        <input type="number" id="sec" placeholder="00">
    </div>
    
    <label>Distance</label>
    <input type="number" id="dist" placeholder="3.1">
    
    <button onclick="calculatePace()">Calculate Pace</button>
    
    <div id="result">--:--</div>
</div>

Step 2: The Inputs (Splitting Time) ⏱️

Notice we used two inputs for time (min and sec). Why? because asking users to type "30.5" for 30:30 is confusing. Let them type Minutes and Seconds separately. It's easier for them, and easier for us to code!

Step 3: The Distance Unit (Miles vs Km) 🌍

Let's add a dropdown so users can choose their unit.

html

<select id="unit">
    <option value="mile">Miles</option>
    <option value="km">Kilometers</option>
</select>

Step 4: The Math Logic (Concept) 🧠

To calculate pace, we need everything in one common unit. Let's convert everything to Seconds.

30 mins = 30 * 60 seconds.
Total Seconds = (Minutes * 60) + Seconds.

Now we have a raw number we can easily divide!

Step 5: Getting Values in JavaScript 🏗️

javascript

function calculatePace() {
    // 1. Get numbers from the inputs
    var minutes = Number(document.getElementById('min').value);
    var seconds = Number(document.getElementById('sec').value);
    var distance = Number(document.getElementById('dist').value);
    
    // Safety Check: Don't divide by zero!
    if(distance === 0) { alert("Distance can't be zero!"); return; }
}

Step 6: Step 6: Calculate Total Seconds ➕

javascript

    // 2. Convert everything to Total Seconds
    var totalSeconds = (minutes * 60) + seconds;

Step 7: The Division (The Pace Formula) ➗

Pace is just "Time divided by Distance".

javascript

    // 3. Divide!
    var paceInSeconds = totalSeconds / distance;

Example: If you ran 3.1 miles in 1860 seconds (31 mins), 1860 / 3.1 = 600 seconds per mile.

Step 8: Convert Back to Readable Time 🔙

Now we have 600 seconds. Nobody says "I run a 600-second mile". We need to turn that back into 10:00.

javascript

    // 4. Convert back to Min:Sec
    var paceMin = Math.floor(paceInSeconds / 60);  // 600 / 60 = 10
    var paceSec = Math.round(paceInSeconds % 60);  // Remainder
    
    // 5. Add a leading zero if seconds is like '5' -> '05'
    if(paceSec < 10) { paceSec = "0" + paceSec; }

Step 9: Make it Sporty (CSS) 👟

Let's use a nice "Running Track" blue and large, readable fonts.

css

<style>
    .calculator-box {
        background: white; padding: 25px; 
        border-radius: 15px; width: 300px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        text-align: center; font-family: sans-serif;
    }
    input, select { padding: 10px; width: 60px; margin: 5px; text-align: center; }
    #dist { width: 100px; }
    
    button {
        background: #007AFF; color: white; border: none;
        padding: 12px 20px; border-radius: 25px;
        font-size: 16px; margin-top: 20px; cursor: pointer;
        width: 100%;
    }
    #result { font-size: 40px; font-weight: bold; color: #333; margin-top: 20px; }
</style>

Step 10: The Complete Code 🏁

Here is the full code. Copy-paste this into an HTML file and start calculating your next PR (Personal Record)!

html

<!DOCTYPE html>
<html>
<head>
    <title>Simple Pace Calculator</title>
    <style>
        body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: 'Segoe UI', sans-serif; }
        .box { background: white; padding: 30px; border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 320px; text-align: center; }
        h2 { color: #007AFF; margin-top: 0; }
        
        .row { margin: 15px 0; }
        label { display: block; font-size: 14px; color: #666; margin-bottom: 5px; font-weight: bold; }
        
        input, select { 
            padding: 10px; border: 2px solid #ddd; border-radius: 8px; 
            font-size: 16px; text-align: center; outline: none;
        }
        input:focus { border-color: #007AFF; }
        
        .time-inputs input { width: 60px; }
        .dist-input { width: 100px; }
        
        button {
            width: 100%; padding: 12px; background: #007AFF; color: white;
            border: none; border-radius: 10px; font-size: 16px; font-weight: bold;
            cursor: pointer; transition: 0.2s;
        }
        button:hover { background: #0056b3; }
        
        .result-box { margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; }
        .big-text { font-size: 48px; font-weight: 800; color: #222; margin: 5px 0; }
        .unit-text { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #888; }
    </style>
</head>
<body>

<div class="box">
    <h2>⏱️ Pace Calculator</h2>
    
    <div class="row">
        <label>TIME OF RUN</label>
        <div class="time-inputs">
            <input type="number" id="h" placeholder="0" style="display:none"> <!-- Optional Hours -->
            <input type="number" id="m" placeholder="30"> <span style="font-size:20px">:</span>
            <input type="number" id="s" placeholder="00">
        </div>
    </div>
    
    <div class="row">
        <label>DISTANCE</label>
        <input type="number" id="d" class="dist-input" placeholder="3.1">
        <select id="u">
            <option value="miles">Miles</option>
            <option value="km">Km</option>
        </select>
    </div>
    
    <button onclick="calc()">Calculate Pace</button>
    
    <div class="result-box">
        <div class="unit-text">YOUR AVERAGE PACE</div>
        <div class="big-text" id="res">--:--</div>
        <div class="unit-text" id="res-unit">MIN / MILE</div>
    </div>
</div>

<script>
    function calc() {
        // Get Inputs
        let mins = Number(document.getElementById('m').value) || 0;
        let secs = Number(document.getElementById('s').value) || 0;
        let dist = Number(document.getElementById('d').value);
        let unit = document.getElementById('u').value;
        
        // Validation
        if(!dist || dist <= 0) { alert("Please enter a valid distance!"); return; }
        
        // 1. Convert total time to seconds
        let totalTimeSeconds = (mins * 60) + secs;
        
        // 2. Pace = Time / Distance
        let paceSeconds = totalTimeSeconds / dist;
        
        // 3. Convert Pace (seconds) back to Min:Sec
        let pMin = Math.floor(paceSeconds / 60);
        let pSec = Math.round(paceSeconds % 60);
        
        // Formatting 0 -> 00
        if(pSec < 10) pSec = "0" + pSec;
        if(pSec === 60) { pSec = "00"; pMin++; } // Handle edge case converting 59.99
        
        // Display Result
        document.getElementById('res').innerText = pMin + ":" + pSec;
        document.getElementById('res-unit').innerText = "MIN / " + (unit === 'miles' ? 'MILE' : 'KM');
    }
</script>

</body>
</html>

Conclusion

You've solved the hardest part of building sports apps: Time Math!

Using (Minutes * 60) + Seconds is the secret key to unlocking any time-based calculation. You can now expand this to calculate speed (mph), finish times, or even race predictions!

Run with Pro Calculator »

Hello Runners & Coders! 🏃‍♂️💻

Have you ever tried to divide "30 minutes and 15 seconds" by "3.1 miles" in your head? It's a nightmare.

That's because Time Math is weird.

In normal math, 0.5 is halfway to 1.
In time math, :30 is halfway to a minute.
If you type 5.50 in a calculator, it's NOT 5 minutes 50 seconds. It's 5 minutes and 30 seconds!

Today, we will build a Speedometer for Runners (Pace Calculator) that handles this messy math for us.

🎯What You Will Learn

✓Understand why Time Math is tricky (Base-60)
✓Convert 'MM:SS' strings into pure seconds
✓Calculate Pace using the formula: Time / Distance
✓Format seconds back into 'MM:SS'
✓Handle logic for both Miles and Kilometers

Step 1: The Design (HTML) 🎨

We need 3 boxes:

Time: How long did you run?
Distance: How far did you go?
Pace: The result (Speed).

html

<div class="calculator-box">
    <h2>🏃 Pace Calculator</h2>
    
    <label>Time (Minutes : Seconds)</label>
    <div class="time-inputs">
        <input type="number" id="min" placeholder="30"> : 
        <input type="number" id="sec" placeholder="00">
    </div>
    
    <label>Distance</label>
    <input type="number" id="dist" placeholder="3.1">
    
    <button onclick="calculatePace()">Calculate Pace</button>
    
    <div id="result">--:--</div>
</div>

Step 2: The Inputs (Splitting Time) ⏱️

Step 3: The Distance Unit (Miles vs Km) 🌍

Let's add a dropdown so users can choose their unit.

html

<select id="unit">
    <option value="mile">Miles</option>
    <option value="km">Kilometers</option>
</select>

Step 4: The Math Logic (Concept) 🧠

To calculate pace, we need everything in one common unit. Let's convert everything to Seconds.

30 mins = 30 * 60 seconds.
Total Seconds = (Minutes * 60) + Seconds.

Now we have a raw number we can easily divide!

Step 5: Getting Values in JavaScript 🏗️

javascript

function calculatePace() {
    // 1. Get numbers from the inputs
    var minutes = Number(document.getElementById('min').value);
    var seconds = Number(document.getElementById('sec').value);
    var distance = Number(document.getElementById('dist').value);
    
    // Safety Check: Don't divide by zero!
    if(distance === 0) { alert("Distance can't be zero!"); return; }
}

Step 6: Step 6: Calculate Total Seconds ➕

javascript

    // 2. Convert everything to Total Seconds
    var totalSeconds = (minutes * 60) + seconds;

Step 7: The Division (The Pace Formula) ➗

Pace is just "Time divided by Distance".

javascript

    // 3. Divide!
    var paceInSeconds = totalSeconds / distance;

Example: If you ran 3.1 miles in 1860 seconds (31 mins), 1860 / 3.1 = 600 seconds per mile.

Step 8: Convert Back to Readable Time 🔙

Now we have 600 seconds. Nobody says "I run a 600-second mile". We need to turn that back into 10:00.

javascript

    // 4. Convert back to Min:Sec
    var paceMin = Math.floor(paceInSeconds / 60);  // 600 / 60 = 10
    var paceSec = Math.round(paceInSeconds % 60);  // Remainder
    
    // 5. Add a leading zero if seconds is like '5' -> '05'
    if(paceSec < 10) { paceSec = "0" + paceSec; }

Step 9: Make it Sporty (CSS) 👟

Let's use a nice "Running Track" blue and large, readable fonts.

css

<style>
    .calculator-box {
        background: white; padding: 25px; 
        border-radius: 15px; width: 300px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        text-align: center; font-family: sans-serif;
    }
    input, select { padding: 10px; width: 60px; margin: 5px; text-align: center; }
    #dist { width: 100px; }
    
    button {
        background: #007AFF; color: white; border: none;
        padding: 12px 20px; border-radius: 25px;
        font-size: 16px; margin-top: 20px; cursor: pointer;
        width: 100%;
    }
    #result { font-size: 40px; font-weight: bold; color: #333; margin-top: 20px; }
</style>

Step 10: The Complete Code 🏁

Here is the full code. Copy-paste this into an HTML file and start calculating your next PR (Personal Record)!

html

<!DOCTYPE html>
<html>
<head>
    <title>Simple Pace Calculator</title>
    <style>
        body { background: #f0f2f5; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: 'Segoe UI', sans-serif; }
        .box { background: white; padding: 30px; border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 320px; text-align: center; }
        h2 { color: #007AFF; margin-top: 0; }
        
        .row { margin: 15px 0; }
        label { display: block; font-size: 14px; color: #666; margin-bottom: 5px; font-weight: bold; }
        
        input, select { 
            padding: 10px; border: 2px solid #ddd; border-radius: 8px; 
            font-size: 16px; text-align: center; outline: none;
        }
        input:focus { border-color: #007AFF; }
        
        .time-inputs input { width: 60px; }
        .dist-input { width: 100px; }
        
        button {
            width: 100%; padding: 12px; background: #007AFF; color: white;
            border: none; border-radius: 10px; font-size: 16px; font-weight: bold;
            cursor: pointer; transition: 0.2s;
        }
        button:hover { background: #0056b3; }
        
        .result-box { margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; }
        .big-text { font-size: 48px; font-weight: 800; color: #222; margin: 5px 0; }
        .unit-text { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #888; }
    </style>
</head>
<body>

<div class="box">
    <h2>⏱️ Pace Calculator</h2>
    
    <div class="row">
        <label>TIME OF RUN</label>
        <div class="time-inputs">
            <input type="number" id="h" placeholder="0" style="display:none"> <!-- Optional Hours -->
            <input type="number" id="m" placeholder="30"> <span style="font-size:20px">:</span>
            <input type="number" id="s" placeholder="00">
        </div>
    </div>
    
    <div class="row">
        <label>DISTANCE</label>
        <input type="number" id="d" class="dist-input" placeholder="3.1">
        <select id="u">
            <option value="miles">Miles</option>
            <option value="km">Km</option>
        </select>
    </div>
    
    <button onclick="calc()">Calculate Pace</button>
    
    <div class="result-box">
        <div class="unit-text">YOUR AVERAGE PACE</div>
        <div class="big-text" id="res">--:--</div>
        <div class="unit-text" id="res-unit">MIN / MILE</div>
    </div>
</div>

<script>
    function calc() {
        // Get Inputs
        let mins = Number(document.getElementById('m').value) || 0;
        let secs = Number(document.getElementById('s').value) || 0;
        let dist = Number(document.getElementById('d').value);
        let unit = document.getElementById('u').value;
        
        // Validation
        if(!dist || dist <= 0) { alert("Please enter a valid distance!"); return; }
        
        // 1. Convert total time to seconds
        let totalTimeSeconds = (mins * 60) + secs;
        
        // 2. Pace = Time / Distance
        let paceSeconds = totalTimeSeconds / dist;
        
        // 3. Convert Pace (seconds) back to Min:Sec
        let pMin = Math.floor(paceSeconds / 60);
        let pSec = Math.round(paceSeconds % 60);
        
        // Formatting 0 -> 00
        if(pSec < 10) pSec = "0" + pSec;
        if(pSec === 60) { pSec = "00"; pMin++; } // Handle edge case converting 59.99
        
        // Display Result
        document.getElementById('res').innerText = pMin + ":" + pSec;
        document.getElementById('res-unit').innerText = "MIN / " + (unit === 'miles' ? 'MILE' : 'KM');
    }
</script>

</body>
</html>

Conclusion

You've solved the hardest part of building sports apps: Time Math!

Using (Minutes * 60) + Seconds is the secret key to unlocking any time-based calculation. You can now expand this to calculate speed (mph), finish times, or even race predictions!

Run with Pro Calculator »

Build Your Own Pace Calculator (10 Easy Steps)

Step 1: The Design (HTML) 🎨

Step 2: The Inputs (Splitting Time) ⏱️

Step 3: The Distance Unit (Miles vs Km) 🌍

Step 4: The Math Logic (Concept) 🧠

Step 5: Getting Values in JavaScript 🏗️

Step 6: Step 6: Calculate Total Seconds ➕

Step 7: The Division (The Pace Formula) ➗

Step 8: Convert Back to Readable Time 🔙

Step 9: Make it Sporty (CSS) 👟

Step 10: The Complete Code 🏁

Conclusion

FastTools Team

Build Your Own Pace Calculator (10 Easy Steps)

Step 1: The Design (HTML) 🎨

Step 2: The Inputs (Splitting Time) ⏱️

Step 3: The Distance Unit (Miles vs Km) 🌍

Step 4: The Math Logic (Concept) 🧠

Step 5: Getting Values in JavaScript 🏗️

Step 6: Step 6: Calculate Total Seconds ➕

Step 7: The Division (The Pace Formula) ➗

Step 8: Convert Back to Readable Time 🔙

Step 9: Make it Sporty (CSS) 👟

Step 10: The Complete Code 🏁

Conclusion

FastTools Team

Finance

Health

Education

Fun Tools

Image & AI

PDF Only

Social

YouTube

Convert

Developer

Festivals

Step 1: The Design (HTML) 🎨

Step 2: The Inputs (Splitting Time) ⏱️

Step 3: The Distance Unit (Miles vs Km) 🌍

Step 4: The Math Logic (Concept) 🧠

Step 5: Getting Values in JavaScript 🏗️

Step 6: Step 6: Calculate Total Seconds ➕

Step 7: The Division (The Pace Formula) ➗

Step 8: Convert Back to Readable Time 🔙

Step 9: Make it Sporty (CSS) 👟

Step 10: The Complete Code 🏁

Conclusion

FastTools Team

Step 1: The Design (HTML) 🎨

Step 2: The Inputs (Splitting Time) ⏱️

Step 3: The Distance Unit (Miles vs Km) 🌍

Step 4: The Math Logic (Concept) 🧠

Step 5: Getting Values in JavaScript 🏗️

Step 6: Step 6: Calculate Total Seconds ➕

Step 7: The Division (The Pace Formula) ➗

Step 8: Convert Back to Readable Time 🔙

Step 9: Make it Sporty (CSS) 👟

Step 10: The Complete Code 🏁

Conclusion

FastTools Team