stopwatch

by Nikita_Lugovykh

HTML

<p class='stopwatch'>00:00:00</p>
<div class="btn_container">
  <button class="btn_start">Start</button>
  <button class="btn_stop">Stop</button>
  <button class="btn_reset">Reset</button>
</div>

JavaScript

const btn_container = document.querySelector('.btn_container');
const btn_start = document.querySelector('.btn_start');
const btn_stop = document.querySelector('.btn_stop');
const btn_reset = document.querySelector('.btn_reset');
const stopwatch = document.querySelector('.stopwatch');
let timer;
let hour = 23;
let minute = 59;
let second = 55;

const start = () => {
  renderStopWatch(updateSeconds(),updateMinutes(), updateHours())
}

const updateSeconds = () => {
	second +=1;
  return validFormat(second);
}

const updateMinutes = () => {
	if (second === 60) {
  	second = 0
    minute +=1;
  }
  return validFormat(minute);
}

const updateHours = () => {
	if (minute === 60) {
  	minute = 0;
    hour += 1;
  }
  if(hour === 24) {
    second = 0;
    minute = 0;
    hour = 0;
  }
  return validFormat(hour);
}

const validFormat = (num) => {
	if (num === 60) num = 0 
	if(num < 10) {
  	return `0${num}` 
  }
  return num
}

const renderStopWatch = (sec, min, h) => {
	stopwatch.innerHTML = `${h}:${min}:${sec}`
}

const reset = () => {
  second = 0;
  minute = 0;
  hour = 0;
  renderStopWatch(validFormat(second),validFormat(minute), validFormat(hour))
	clearInterval(timer);

}

btn_container.addEventListener('click', (ev)=>{
	if(ev.target.tagName !== 'BUTTON') return 
  
  if (ev.target.className === 'btn_start') {
				setTimeout(function run() {
        	start()
        timer = setTimeout(run,1000)
		},1000);
    ev.target.disabled = true;
	}
  if (ev.target.className === 'btn_stop') {
		clearInterval(timer);
    btn_start.disabled = false
	}
  if (ev.target.className === 'btn_reset') {
		reset()
    btn_start.disabled = false
	}
})