JavaScript Timer

How to Create a Timer in Vanilla JavaScript

Watch the full tutorial here:
Youtube Rumble Odysee
html
<!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>JavaScript Timer</title>
</head>

<body>
    <div id="timerApp">
        <span id="minuteScreen">00:00</span>

        <div class="minutes-btn-container">
            <button data-value="5">5</button>
            <button data-value="10">10</button>
            <button data-value="15">15</button>
        </div>

        <div class="action-btn-conatainer">
            <button data-action="start">start</button>
            <button data-action="pause">pause</button>
            <button data-action="reset">reset</button>
        </div>
    </div>
</body>

</html>
javascript
let intervalId;
let remainingTime = 0;
let minuteScreen = document.getElementById("minuteScreen");

const timer = document.getElementById("timerApp");
if (timer != null) {
    timer.addEventListener('click', (e) => {
        e.preventDefault();
        const targetElement = e.target.closest("button");

        if (targetElement != null && targetElement.dataset.value) {
            let totalTime = parseInt(targetElement.dataset.value) * 60;
            updateScreen(totalTime);
            remainingTime = totalTime;
        }

        if (targetElement != null && targetElement.dataset.action === "start") {
            startTimer();
        }

        if (targetElement != null && targetElement.dataset.action === "pause") {
            clearInterval(intervalId);
        }

        if (targetElement != null && targetElement.dataset.action === "reset") {
            clearInterval(intervalId);
            remainingTime = 0;
            updateScreen(0);
        }

    });
}

function updateScreen(timeCount) {
    let minute = Math.floor(timeCount / 60);
    let seconds = timeCount % 60;
    minuteScreen.innerText = `${String(minute).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
}

function startTimer() {
    clearInterval(intervalId);

    intervalId = setInterval(() => {
        if (remainingTime > 0) {
            remainingTime--;
            updateScreen(remainingTime);
        } else {
            clearInterval(intervalId);
        }
    }, 1000);
}