ストップウォッチScript案

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Timer App</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="timer">
      <h1 class="timer-display" id="timer">00:00:00</h1>
      <div class="timer-buttons">
        <button class="timer-button" id="start">Start</button>
        <button class="timer-button" id="stop">Stop</button>
        <button class="timer-button" id="reset">Reset</button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

let timerInterval;
let seconds = 0;
let minutes = 0;
let hours = 0;
let display = document.getElementById("timer");
let startButton = document.getElementById("start");
let stopButton = document.getElementById("stop");
let resetButton = document.getElementById("reset");
let timerRunning = false;

function startTimer() {
  if (!timerRunning) {
    timerInterval = setInterval(function() {
      seconds++;
      if (seconds === 60) {
        seconds = 0;
        minutes++;
        if (minutes === 60) {
          minutes = 0;
          hours++;
        }
      }
      displayTimer();
    }, 1000);
    timerRunning = true;
  }
}

function stopTimer() {
  clearInterval(timerInterval);
  timerRunning = false;
}

function resetTimer() {
const isConfirmed = confirm("送信しますか？");
clearInterval(timerInterval);
seconds = 0;
minutes = 0;
hours = 0;
displayTimer();
timerRunning = false;
  if (isConfirmed) {
    console.log("test");//ここを変えて記録管理側に時間を送信する
  }
	
	
}

function displayTimer() {
  let secStr = seconds.toString().padStart(2, '0');
  let minStr = minutes.toString().padStart(2, '0');
  let hourStr = hours.toString().padStart(2, '0');
  display.textContent = hourStr + ':' + minStr + ':' + secStr;
}

startButton.addEventListener("click", startTimer);
stopButton.addEventListener("click", stopTimer);
resetButton.addEventListener("click", resetTimer);

**body {
  background-color: #e6e6e6;
  font-family: Arial, sans-serif;
}

.timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.timer-display {
  font-size: 5rem;
  color: #1e90ff;
  margin-bottom: 1rem;
}

.timer-buttons {
  display: flex;
}

.timer-button {
  background-color: #1e90ff;
  color: #ffffff;
  font-size: 1.5rem;
  border: none;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  margin-right: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.timer-button:hover {
  background-color: #0077b6;
}**

Screenshot from 2023-05-12 14-37-05.png