JavaScript Pomodoro Timer

How to Build a Pomodoro 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>Pomodoro timer</title>
</head>

<body>
    <div id="pomodoro">
        <span id="msg">Time to work</span> <br>
        <span id="minuteScreen">25:00</span>
        <div class="action-btn-container">
            <button data-action="start">start</button>
            <button data-action="skip">skip</button>
        </div>
    </div>
</body>

</html>

javascript

let intervalId;
let workTimer = 0;
let restTimer = 5 * 60;
let minuteScreen = document.getElementById("minuteScreen");
let msg = document.getElementById("msg");

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

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

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

            const totalTime = parseInt(minuteScreen.innerText) * 60;
            workTimer = totalTime;
            startPomodoro();
            updateScreen(totalTime);
        }

        if (targetEl != null && targetEl.dataset.action === "skip") {
            if (workTimer > 0) {
                workTimer = 0;
                restTimer = 5 * 60;
                startPomodoro();
            } else {
                restTimer = 0;
                startPomodoro();
            }
        }
    });
}

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 startPomodoro() {
    clearInterval(intervalId);

    intervalId = setInterval(() => {
        if (workTimer > 0) {
            workTimer--;
            updateScreen(workTimer);
        } else {

            if (restTimer > 0) {
                restTimer--;
                msg.innerText = "Time to rest";
                updateScreen(restTimer);
            } else {
                msg.innerText = "Time to work";
                workTimer = 25 * 60;
            }
        }
    }, 1000);
}