HTML file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stop Watch</title>
</head>
<body>
    <h1>Stop Watch</h1>
    <span id="time">00 : 00</span>
    <button onclick="startClock()">Start</button>
    <button onclick="resetClock()">Reset</button>
    <button onclick="stopClock()">Stop</button>

    <script src="index.js"></script>
</body>
</html>


JavaScript file

let secondsElapsed = 0;
let interval = null;
const time = document.getElementById("time")

function padStart(value){
    return String(value).padStart(2, "0")
}

function setTime() {
    const minutes = Math.floor(secondsElapsed / 60)
    const seconds = secondsElapsed % 60
    time.innerHTML = `${padStart(minutes)}:${padStart(seconds)}`;
}

function timer() {
    secondsElapsed++;
    setTime()
}

function startClock() {
    if (interval) stopClock()
    interval = setInterval(timer, 1000)
}

function stopClock() {
    clearInterval(interval)
}

function resetClock() {
    stopClock()
    secondsElapsed = 0;
    setTime()
}