⏳ Countdown Timer (10 Seconds)

Using JavaScript’s setInterval to create a countdown from 10 seconds.
When it reaches 0, it displays “✅ Time's up!”

  • 🎬 Quizzes/Tests: Display a time limit
  • 🍜 Cooking Websites: Countdown for boiling time
  • 📊 Presentation Timer: A simple tool for time management
  • 🎮 Game Time Limits: Useful for custom mini-games!

🧪 Try it out: Press “Start” to begin a 10-second countdown.
At 0 seconds, it shows ✅ “Time's up!”
Press “Reset” to restart anytime!

👇Here it is👇
Time remaining: 10 seconds
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Countdown Timer</title>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
      padding: 50px;
    }
    #countdown {
      font-size: 2rem;
      margin: 20px 0;
    }
    button {
      font-size: 1rem;
      padding: 10px 20px;
      margin: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <h1>⏳ Countdown Timer</h1>
  <div id="countdown">Time left: 10 seconds</div>
  <button onclick="startCountdown()">Start</button>
  <button onclick="resetCountdown()">Reset</button>

  <script>
    let timeLeft = 10;
    let timerId = null;

    function startCountdown() {
      if (timerId !== null) return;
      document.getElementById("countdown").textContent = "Time left: " + timeLeft + " seconds";

      timerId = setInterval(() => {
        timeLeft--;
        if (timeLeft > 0) {
          document.getElementById("countdown").textContent = "Time left: " + timeLeft + " seconds";
        } else {
          clearInterval(timerId);
          timerId = null;
          document.getElementById("countdown").textContent = "✅ Time's up!";
        }
      }, 1000);
    }

    function resetCountdown() {
      clearInterval(timerId);
      timerId = null;
      timeLeft = 10;
      document.getElementById("countdown").textContent = "Time left: 10 seconds";
    }
  </script>

</body>
</html>

⏱ Adapt the Countdown to Show Minutes and Seconds

This template is set for a fixed “10-second” countdown, but with a small tweak, you can modify it to display time in minutes and seconds format.

For example, if you want a timer for “1 minute and 30 seconds”, just use the total seconds and convert it like this:

let totalSeconds = 90;

setInterval(() => {
  totalSeconds--;
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  document.getElementById("countdown").textContent =
    "Time left: " + minutes + " min " + seconds + " sec";
}, 1000);
  • 📏 Easily set any time (e.g., 5 minutes, 90 seconds, etc.)
  • 📱 Works well with time inputs from a form
  • 🧠 “min:sec” format is easier for users to understand

The key to building flexible timers is to separate the "internal time logic" from the "display format".
Once you master that, you’ll be able to build more advanced features like pause, resume, or visual progress bars.