.stop_watch{
  
}

.stop_watch__window{
  height: ;
  font-size: 50px;
  text-align: center;

}

.stop_watch__buttons{
  display: flex;
  width: 100%;
  justify-content:center;
}

.stop_watch__buttons button{
  margin-right: 10px;
}
.stop_watch__buttons button:last-child{
  margin-right: 0;
}

class Stopwatch {
  constructor (el){
    this.hour= 0;
    this.min =0;
    this.sec=0;
    this.self = el;
    this.interval = '';
  }
  
  reset(){
    clearInterval(this.interval);
    this.interval ='';
    this.sec=0;
    this.min=0;
    this.hour=0;
    this.show();
  }
  
  start(){
    if(this.interval){
      return;
    }
      this.interval = setInterval(()=>this.timer(), 1000);
  }
   
  stop(){
    clearInterval(this.interval);
    this.interval ='';
  }
  
  show(){
    const formatter = (num)=>{
      let result = `00${num}`;
      result = result.slice(-2);
      return result;
    }
    let timeText = `${formatter(this.hour)}:${formatter(this.min)}:${formatter(this.sec)}`;
    this.self.querySelector('.stop_watch__window').innerText = timeText;
  }
    
  timer(){
    this.sec+=1;
    if(this.sec==60){
      this.min+=1;
      this.sec=0;
    }
    if(this.min==60){
      this.hour+=1;
      this.min=0;
    }
    this.show();
  }
  
  
  
}

const stopWatch = new Stopwatch(document.getElementById('stopWatch'));