index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>5-Minute Timer with Controls</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #0a2472;
    color: white;
    font-family: 'Montserrat', sans-serif;
    flex-direction: column;
  }
  h1 {
    font-size: 4rem;
    margin: 0;
  }
  .buttons {
    margin-top: 20px;
    display: flex;
    gap: 15px;
  }
  button {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background-color: #ff7f50;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  button:hover {
    background-color: #ff9966;
  }
</style>
</head>
<body>
  <h1 id="timer">05:00</h1>
  <div class="buttons">
    <button onclick="startTimer()">Start</button>
    <button onclick="pauseTimer()">Pause</button>
    <button onclick="resetTimer()">Restart</button>
  </div>

  <script>
    let time = 300; // 5 minutes in seconds
    let timerInterval;
    let isRunning = false;

    function updateDisplay() {
      const minutes = Math.floor(time / 60);
      const seconds = time % 60;
      document.getElementById('timer').textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    }

    function startTimer() {
      if (isRunning) return; // prevent multiple intervals
      isRunning = true;
      timerInterval = setInterval(() => {
        if (time <= 0) {
          clearInterval(timerInterval);
          document.getElementById('timer').textContent = "TIME'S UP!";
          isRunning = false;
          return;
        }
        time--;
        updateDisplay();
      }, 1000);
    }

    function pauseTimer() {
      clearInterval(timerInterval);
      isRunning = false;
    }

    function resetTimer() {
      clearInterval(timerInterval);
      time = 300;
      isRunning = false;
      updateDisplay();
    }

    updateDisplay();
  </script>
</body>
</html>