JSFiddle - React, Tailwind, and code Playground

by jpeshi

HTML

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Simple setInterval clock</title>
    <style>
      p {
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
		<button class="startBtn">Start</button>
		<button class="stopBtn">Stop</button>
		<button class="resetBtn">Reset</button>
    <p class="clock"></p>
    <script>
			const startBtn = document.querySelector('.startBtn');
			const stopBtn = document.querySelector('.stopBtn');
			const resetBtn = document.querySelector('.resetBtn');
			const clock = document.querySelector('.clock');
			
			startBtn.addEventListener('click', start);
			stopBtn.addEventListener('click', stop);
			resetBtn.addEventListener('click', reset);
			
			
			let startTime;
			let createClock;
			let createStopClock;
			let pauseTime = 0;
			let startPauseTime = 0;
			
      function start() {
				if (!createClock) {
					createClock = setInterval(start, 1000);
				}
				
				clearInterval(createStopClock);
				createStopClock = 0;
				startBtn.setAttribute('disabled', true);
				stopBtn.removeAttribute('disabled');
				
				if (!startTime) {
					startTime = Date.now();
				}
				
				let currentTime = Date.now();
				startTime += pauseTime;
				let clockTime = Math.round((currentTime - startTime) / 1000);
				startPauseTime = 0;
				pauseTime = 0;
        clock.textContent = clockTime;
      }
			
			function stop() {
				if (!createStopClock) {
					createStopClock = setInterval(stop, 1000);
				}
				
				clearInterval(createClock);
				createClock = 0;
				startBtn.removeAttribute('disabled');
				stopBtn.setAttribute('disabled', true);
				
				if (!startPauseTime) {
					startPauseTime = Date.now();
				}
				
				let currentPauseTime = Date.now();
				pauseTime = currentPauseTime - startPauseTime;

			}
			
			function reset() {
				stopBtn.setAttribute('disabled', true);
				startBtn.removeAttribute('disabled');
				startPauseTime = 0;
				startTime = 0;
				pauseTime =...