index.js

const startStopBtn = document.querySelector('#startStopBtn');
const resetBtn = document.querySelector('#resetBtn');
const display = document.querySelector('#timer')

let hours = 0;
let minutes = 0;
let seconds = 0;
// Extra zeroes
let leadingHours = 0;
let leadingMinutes = 0;
let leadingSeconds = 0;
// Btn 
let timeInterval = null;
let state = 'stopped';


function stopWatch() {
    seconds++;

    if(seconds / 60 === 1) {
        seconds = 0;
        minutes++;

    if(minutes / 60 === 1) {
        minutes = 0;
        hours++; 
    }  
}

if(seconds < 10) 
    leadingSeconds = '0' + seconds.toString();
else leadingSeconds = seconds;

if(minutes < 10) 
    leadingMinutes = '0' + minutes.toString();
else leadingMinutes = minutes;

if(hours < 10) 
    leadingHours = '0' + hours.toString();
else leadingHours = hours;

    display.innerText = leadingHours + ":" + leadingMinutes + ":" + leadingSeconds;
}

// Btn events
startStopBtn.addEventListener('click', function() {
    if(state === 'stopped') { 
        timeInterval = window.setInterval(stopWatch, 1000);
        state = 'running';
        startStopBtn.innerHTML =
         '<i class = "fa-solid fa-pause" id = "pause"></i>';
    }

    else {
        window.clearInterval(timeInterval);
        state = 'stopped';
        startStopBtn.innerHTML =
         '<i class = "fa-solid fa-play" id = "play"></i>';
    }
});

resetBtn.addEventListener('click', function() {
    seconds = 0;
    minutes = 0;
    hours = 0;
    display.innerText = '00:00:00';
});