Multiple intervals being set in Pomodoro Project: Fix Given in Description

[AnshulKale]

Html file Code:

`

<title>Pomodoro Timer</title>

Pomodoro Timer

25:00

START STOP RESET

<script src="index.js"></script> `

Css file Code:

`body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
color: rgb(44, 47, 52);
height: 100vh;
}

#container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgb(239, 239, 239);
box-shadow: 0 0 5px 1px lightgray;
padding: 20px;
border-radius: 10px;
}

h2 {
box-shadow: 2px 2px 0px 2px lightgray, -2px -2px 0px 2px white;
padding: 5px;
border-radius: 5px;
}

#timer {
font-size: 100px;
margin: 0;
margin-bottom: 30px;
}

.btnContainer {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}

.timerButton {
margin-left: 5px;
margin-right: 5px;
padding: 10px 20px;
border: 0;
border-radius: 5px;
box-shadow: 2px 2px 0px 1px rgb(190, 190, 190);
transition-property: background-color, box-shadow;
transition-duration: 0.4s, 0.1s;
color: white;
}

#start {
background-color:rgb(68, 137, 68);
}

#start:hover {
background-color: rgb(140, 219, 140);
}

#stop {
background-color:rgb(161, 65, 75);
}

#stop:hover {
background-color: rgb(181, 104, 112);
}

#reset {
background-color:rgb(84, 84, 84);
}

#reset:hover {
background-color: rgb(152, 152, 152);
}

#start:active, #stop:active, #reset:active {
box-shadow: 0 0 0 0 lightblue;
}`

JS File Code:

`const startBtn = document.querySelector("#start");
const stopBtn = document.querySelector("#stop");
const resetBtn = document.querySelector("#reset");
const timer = document.querySelector("#timer");

let minutes = 25;
let seconds = 0;

function Timer() {
let intervalId = null;

function start() {
    if(intervalId) return;

    intervalId = setInterval(() => {
        seconds--;
        if(seconds < 0)
        {
            minutes--;
            seconds = 59;
        }
        setTimerText(minutes,seconds);

        if(minutes === 0 && seconds === 0)
        {
            clearInterval(intervalId);
        }
    }, 1000);
}

function stop() {
    clearInterval(intervalId);
    intervalId = null;
    
}

function reset() {
    minutes = 25;
    seconds = 0;
    clearInterval(intervalId);
    intervalId = null;
    setTimerText(minutes,seconds);
}

return {start, stop, reset};

}

function setTimerText(minutes, seconds) {
timer.textContent = ${minutes}:${String(seconds).padStart(2, '0')};
}

const myTimer = Timer();
startBtn.addEventListener("click", myTimer.start);
stopBtn.addEventListener("click", myTimer.stop);
resetBtn.addEventListener("click", myTimer.reset);`