bantic · April 15, 2025 08:57
diff --git a/index.html b/index.html
 <html>
  <body>
    <style>
      .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        flex-direction: column;
      }
      .timer {
        font-size: 100px;
        font-family: math;
      }
    </style>
    <div class="container">
      <div class="timer"></div>
      <div class="controls">
        <button id="start">Start</button>
        <button id="reset">Reset</button>
        <button id="stop">Stop</button>
      </div>
    </div>

    <script>
      document.getElementById("start").addEventListener("click", startTimer);
      document.getElementById("reset").addEventListener("click", resetTimer);
      document.getElementById("stop").addEventListener("click", stopTimer);

      let startAt = new Date();
      let state = "stopped";
      let elapsed = 0;

      function updateElapsed() {
        if (state === "started") {
          elapsed = Math.floor((new Date() - startAt) / 1000);
        }
      }

      function render() {
        updateElapsed();
        const timerElement = document.querySelector(".timer");
        const minutes = Math.floor(elapsed / 60);
        const seconds = elapsed % 60;
        timerElement.textContent = `${minutes}:${
          seconds < 10 ? "0" : ""
        }${seconds}`;
        requestAnimationFrame(render);
      }
      render();

      function startTimer() {
        startAt = new Date();
        state = "started";
      }
      function stopTimer() {
        state = "stopped";
      }
      function resetTimer() {
        elapsed = 0;
        state = "stopped";
      }
    </script>
  </body>
 </html>
	<html>
	<body>
	<style>
	.container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	flex-direction: column;
	}
	.timer {
	font-size: 100px;
	font-family: math;
	}
	</style>
	<div class="container">
	<div class="timer"></div>
	<div class="controls">
	<button id="start">Start</button>
	<button id="reset">Reset</button>
	<button id="stop">Stop</button>
	</div>
	</div>

	<script>
	document.getElementById("start").addEventListener("click", startTimer);
	document.getElementById("reset").addEventListener("click", resetTimer);
	document.getElementById("stop").addEventListener("click", stopTimer);

	let startAt = new Date();
	let state = "stopped";
	let elapsed = 0;

	function updateElapsed() {
	if (state === "started") {
	elapsed = Math.floor((new Date() - startAt) / 1000);
	}
	}

	function render() {
	updateElapsed();
	const timerElement = document.querySelector(".timer");
	const minutes = Math.floor(elapsed / 60);
	const seconds = elapsed % 60;
	timerElement.textContent = `${minutes}:${
	seconds < 10 ? "0" : ""
	}${seconds}`;
	requestAnimationFrame(render);
	}
	render();

	function startTimer() {
	startAt = new Date();
	state = "started";
	}
	function stopTimer() {
	state = "stopped";
	}
	function resetTimer() {
	elapsed = 0;
	state = "stopped";
	}
	</script>
	</body>
	</html>