Tiim/stopwatch.html

## stopwatch.html
<!DOCTYPE html>
<html>

<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <title>Stopwatch</title>
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@600&display=swap" rel="stylesheet">
</head>

<body>
  <div class="wrapper">
    <span class="clock">Clock</span>
    <span class="stopwatch">
      <span class="hour-wr wrapper-digit"><span class="hour digit">0</span> : </span>
      <span class="min-wr wrapper-digit"><span class="minute digit">00</span> : </span>
      <span class="sec-wr wrapper-digit"><span class="second digit">00</span> . </span>
      <span class="ms-wr wrapper-digit"><span class="milisecond digit">0</span></span>
    </span>
  </div>

  <style>
    body {
      background-color: black;
      color: white;
    }

    .wrapper {
      display: grid;
      width: 100%;
      height: 100%;
      justify-content: center;
      justify-items: center;
      gap: 1em;
      font-family: 'IBM Plex Sans', sans-serif;
    }

    .digit {
      font-size: 50pt;
    }

    .clock {}

    .stopwatch {}
  </style>
  <script>
    const clock = document.querySelector('.clock');
    const stopwatch = document.querySelector('.stopwatch');

    const hour = document.querySelector('.hour');
    const minute = document.querySelector('.minute');
    const second = document.querySelector('.second');
    const milisecond = document.querySelector('.milisecond');

    const wrapperHour = document.querySelector('.hour-wr');

    document.addEventListener('click', startStop);

    updateClock();
    setInterval(updateClock, 1000);

    let running = false;
    let startTime = null;
    let intervalRef = null;
    function startStop() {
      if (!running) {
        running = true;
        if (startTime == null) {
          startTime = new Date().getTime();
        }
        intervalRef = setInterval(updateStopwatch, 100);
      } else {
        running = false;
        clearInterval(intervalRef);
      }
    }

    function updateStopwatch() {
      const elapsed = new Date().getTime() - startTime;
      const ms = new String(Math.floor(elapsed / 100 % 10));
      const sec = new String(Math.floor((elapsed / 1000) % 60)).padStart(2, '0');
      const min = new String(Math.floor((elapsed / (1000 * 60)) % 60)).padStart(2, '0');
      const h = Math.floor(elapsed / (1000 * 60 * 60));
      const txt = `${h}:${min}:${sec}.${ms}`;

      wrapperHour.style.visibility = h == 0 ? 'hidden' : 'visible';

      hour.textContent = h;
      minute.textContent = min;
      second.textContent = sec;
      milisecond.textContent = ms;
    }

    function updateClock() {
      const time = new Date().toLocaleTimeString();
      clock.textContent = time;
    }
  </script>

</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
	<meta content="utf-8" http-equiv="encoding">
	<title>Stopwatch</title>
	<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@600&display=swap" rel="stylesheet">
	</head>

	<body>
	<div class="wrapper">
	<span class="clock">Clock</span>
	<span class="stopwatch">
	<span class="hour-wr wrapper-digit"><span class="hour digit">0</span> : </span>
	<span class="min-wr wrapper-digit"><span class="minute digit">00</span> : </span>
	<span class="sec-wr wrapper-digit"><span class="second digit">00</span> . </span>
	<span class="ms-wr wrapper-digit"><span class="milisecond digit">0</span></span>
	</span>
	</div>

	<style>
	body {
	background-color: black;
	color: white;
	}

	.wrapper {
	display: grid;
	width: 100%;
	height: 100%;
	justify-content: center;
	justify-items: center;
	gap: 1em;
	font-family: 'IBM Plex Sans', sans-serif;
	}

	.digit {
	font-size: 50pt;
	}

	.clock {}

	.stopwatch {}
	</style>
	<script>
	const clock = document.querySelector('.clock');
	const stopwatch = document.querySelector('.stopwatch');

	const hour = document.querySelector('.hour');
	const minute = document.querySelector('.minute');
	const second = document.querySelector('.second');
	const milisecond = document.querySelector('.milisecond');

	const wrapperHour = document.querySelector('.hour-wr');

	document.addEventListener('click', startStop);

	updateClock();
	setInterval(updateClock, 1000);

	let running = false;
	let startTime = null;
	let intervalRef = null;
	function startStop() {
	if (!running) {
	running = true;
	if (startTime == null) {
	startTime = new Date().getTime();
	}
	intervalRef = setInterval(updateStopwatch, 100);
	} else {
	running = false;
	clearInterval(intervalRef);
	}
	}

	function updateStopwatch() {
	const elapsed = new Date().getTime() - startTime;
	const ms = new String(Math.floor(elapsed / 100 % 10));
	const sec = new String(Math.floor((elapsed / 1000) % 60)).padStart(2, '0');
	const min = new String(Math.floor((elapsed / (1000 * 60)) % 60)).padStart(2, '0');
	const h = Math.floor(elapsed / (1000 * 60 * 60));
	const txt = `${h}:${min}:${sec}.${ms}`;

	wrapperHour.style.visibility = h == 0 ? 'hidden' : 'visible';

	hour.textContent = h;
	minute.textContent = min;
	second.textContent = sec;
	milisecond.textContent = ms;
	}

	function updateClock() {
	const time = new Date().toLocaleTimeString();
	clock.textContent = time;
	}
	</script>

	</body>

	</html>