JSFiddle - React, Tailwind, and code Playground

by Roman Fedytskyi

HTML

<div class="time"></div>
<button class="stop">STOP</button>
<button class="start">START</button>

CSS

.stop {
  background-color: red;
}

.start {
  background-color: yellow;
}

JavaScript

var time = document.querySelector('.time');
var start = document.querySelector('.start');
var stop = document.querySelector('.stop');

var miliseconds = 0;
var seconds = 0;
var minutes = 0;
var hours = 0;

function startTimer() {
	setInterval(
		function () {
	  	miliseconds += 1;

			if (miliseconds === 10) {
	    	seconds += 1;
	    	miliseconds = 0;
	    }

	    if (seconds === 10) {
	    	minutes += 1;
	    	seconds = 0;
	    }
	    
	    if (minutes === 10) {
	    	hours += 1;
	    	minutes = 0;
	    }
	
	    time.innerHTML = miliseconds + ":" + seconds + ":" + minutes + ":" + hours;
	  }, 100
	);
}

start.addEventListener('click', startTimer);