@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');

:root{
  --bkg:#004643;
  --textcolor:#fffffe;
  --buttonClr:#f9bc60;
  --btnTxtClr:#001e1d;
  --headlines#abd1c6;
}
body{
  min-height:100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bkg);
   color:var(--textcolor);
}
.container{
  box-shadow:0px 6px 12px grey;
  min-height:80vh;
  min-width:80vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction:column;
  border-radius:40px;
}

.container h1{
 
  font-weight:800;
  letter-spacing:2px;
}
.timer{
  font-size:3rem;
  font-weight:900;
  font-family: 'Oswald', sans-serif;
}

.navigation button{
  padding: 1rem;
  border-radius:10px;
  outline:none;
  cursor:pointer;
  background-color: var(--buttonClr);
  border:none;
}
.navigation button i{
  font-size:2rem;
  color:var(--btnTxtClr);
}
.navigation button:not(:last-child){
  margin-right:2rem;
}
button i:nth-child(2){
  display:none;
}

button:nth-child(1):active{
  background-color: #001e1d; 
}
button:nth-child(1):active i{

  color:var(--textcolor);
}

// 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}`;
  }