JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Egg Timer</title>
  <style>
    #timer {
      font-size: 32px;
      font-weight: bold;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="timer">1:20</div>

  <script>
    let timeLeft = 80; // 1 minute 20 seconds in seconds

    const timerElement = document.getElementById('timer');

    const intervalId = setInterval(() => {
      timeLeft--;

      if (timeLeft === 0) {
        clearInterval(intervalId);
        alert('Time is up!');
      } else {
        const minutes = Math.floor(timeLeft / 60);
        const seconds = timeLeft % 60;

        const formattedTime = `${minutes}:${seconds.toString().padStart(2, '0')}`;
        timerElement.textContent = formattedTime;
      }
    }, 1000); // Update the timer every second
  </script>
</body>
</html>