// get elements
const timerContainer = document.querySelector('.timer'),
       playBtn = document.querySelector('.play'), 
      playIcon = document.querySelector('.play i'),
      resetBtn = document.querySelector('.reset');

//timer variables
let timeInterval = null,
    timeStatus = false,
      minutes =0,
      seconds =0,
      hours =0,
      leadingMins = 0,
      leadingSecs =0,
      leadingHrs =0;


function startTimer(){
  seconds++;
  //if seconds dived by 60 = 1 set back the seconds to 0 and increment the minutes 
  if(seconds/60 === 1 ){
    seconds =0;
    minutes++;
      //if minutes dived by 60 = 1 set back the minutes to 0 and increment the hours 
    if(minutes/60 === 1){
      minutes =0;
      hours++;
    }
  }
  //add zero if seconds are less than 10
  if(seconds < 10){
    leadingSecs = '0' + seconds.toString();
  }else{
    leadingSecs = seconds;
  };
    //add zero if minutes are less than 10
        if(minutes < 10){
   leadingMins= '0' + minutes.toString();
  }else{
    leadingMins= minutes;
  };
    //add zero if hours are less than 10
    if(hours < 10){
   leadingHrs= '0' + hours.toString();
  }else{
    leadingHrs= hours;
  };
    //Change timer text content to actaul stop watch
  timerContainer.innerHTML = `${leadingHrs} : ${leadingMins} : ${leadingSecs}`;
}

//play/pause button functionality
playBtn.addEventListener('click', (e)=>{
   if(timeStatus === false){
    timeInterval = setInterval(startTimer, 1000);
     playBtn.innerHTML = `<i class="fa-solid fa-pause"><i/>`;
    timeStatus = true;
  }else{
    window.clearInterval(timeInterval);
     playBtn.innerHTML = `<i class="fa-solid fa-play"><i/>`;
    timeStatus = false;
  }
})
// reset button
  resetBtn.onclick = ()=>{
     window.clearInterval(timeInterval);
    minutes =0, seconds =0, hours = 0;
    timeStatus = false;
    timerContainer.innerHTML = `0${hours} : 0${minutes} : 0${seconds}`;
  }