JavaScript Speedrun

Create a Speedrun JavaScript

Watch the full tutorial here:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./main.js" defer></script>
    <title>speedrun</title>
</head>

<body>
    <div id="speedrun">
        <span id="minuteScreen">00:00.00</span>
        <div class="action-btn-container">
            <button data-action="start">start</button>
            <button data-action="stop">stop</button>
            <button data-action="reset">reset</button>
            <button data-action="lap">lap</button>
        </div>
        <div id="lapContainer"></div>
    </div>
</body>

</html>

let intervalId;
let startTime = 0;
let stopTime = 0;
let elapsedTime;
let isRunning = false;
let minuteScreen = document.getElementById("minuteScreen");
let lapContainer = document.getElementById("lapContainer");

const speedrun = document.getElementById("speedrun");
if (speedrun != null) {
    speedrun.addEventListener("click", (e) => {

        e.preventDefault();
        const targetEl = e.target.closest("button");

        if (targetEl != null && targetEl.dataset.action === "start") {
            startSpeedrun();
        }

        if (targetEl != null && targetEl.dataset.action === "stop") {
            stopSpeedrun();
        }

        if (targetEl != null && targetEl.dataset.action === "reset") {
            resetSpeedrun();
        }

        if (targetEl != null && targetEl.dataset.action === "lap") {
            lapMinutes();
        }
    });
}

function updateSpeedrun() {
    elapsedTime = stopTime + (isRunning ? performance.now() - startTime : 0);
    let MM = Math.floor(elapsedTime / 60000);
    let SS = Math.floor((elapsedTime % 60000) / 1000);
    let MS = Math.floor((elapsedTime % 1000) / 10);

    minuteScreen.innerText = `${String(MM).padStart(2, "0")}:${String(SS).padStart(2, "0")}.${String(MS).padStart(2, "0")}`;
}

function startSpeedrun() {
    if (isRunning) return;

    startTime = performance.now();
    intervalId = setInterval(updateSpeedrun, 10);
    isRunning = true;
}

function stopSpeedrun() {
    if (!isRunning) return;

    clearInterval(intervalId);
    stopTime += performance.now() - startTime;
    isRunning = false;
}

function resetSpeedrun() {
    clearInterval(intervalId);
    startTime = 0;
    stopTime = 0;
    isRunning = false;
    minuteScreen.innerText = "00:00.00";
}

function lapMinutes() {
    if (!isRunning) return;

    let MM = Math.floor(elapsedTime / 60000);
    let SS = Math.floor((elapsedTime % 60000) / 1000);
    let MS = Math.floor((elapsedTime % 1000) / 10);

    let lapMin = `${String(MM).padStart(2, "0")}:${String(SS).padStart(2, "0")}.${String(MS).padStart(2, "0")}`;
    lapContainer.innerHTML += `<p>${lapMin}</p>`;
}

JavaScript Speedrun

Create a Speedrun JavaScript

html

javascript