Count Down Timer tool code

Here is the countdown timer control with start, stop, reset functionality, this tool is made with simple html, css and javascript, it is very easy to use and fully functional.
you just need to copy and paste the below code and start enjoying the countdown timer.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Countdown Timer</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: linear-gradient(135deg, #ff9a9e, #fad0c4);
      color: #fff;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    .timer-container {
      text-align: center;
      background: rgba(0, 0, 0, 0.7);
      padding: 20px;
      border-radius: 15px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      max-width: 400px;
      width: 100%;
    }
    .timer-display {
      font-size: 2.5rem;
      margin: 20px 0;
      letter-spacing: 2px;
      background: linear-gradient(90deg, #00c6ff, #0072ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .timer-controls button {
      background: linear-gradient(90deg, #89fffd, #ef32d9);
      border: none;
      padding: 10px 20px;
      border-radius: 25px;
      color: white;
      font-size: 1rem;
      cursor: pointer;
      margin: 5px;
      transition: all 0.3s;
    }
    .timer-controls button:hover {
      transform: scale(1.1);
    }
    .input-group {
      margin: 20px 0;
    }
    .input-group input {
      padding: 10px;
      font-size: 1rem;
      border: none;
      border-radius: 5px;
      margin: 0 5px;
    }
  </style>
</head>
<body>
  <div class="timer-container">
    <h1>Countdown Timer</h1>
    <div class="timer-display" id="timer-display">00:00:00</div>
    <div class="input-group">
      <input type="number" id="hours" placeholder="Hours" min="0" max="23">
      <input type="number" id="minutes" placeholder="Minutes" min="0" max="59">
      <input type="number" id="seconds" placeholder="Seconds" min="0" max="59">
    </div>
    <div class="timer-controls">
      <button id="start-button">Start</button>
      <button id="pause-button">Pause</button>
      <button id="reset-button">Reset</button>
    </div>
  </div>

  <script>
    let countdownInterval;
    let remainingTime = 0;

    const display = document.getElementById('timer-display');
    const startButton = document.getElementById('start-button');
    const pauseButton = document.getElementById('pause-button');
    const resetButton = document.getElementById('reset-button');

    function formatTime(seconds) {
      const hrs = Math.floor(seconds / 3600);
      const mins = Math.floor((seconds % 3600) / 60);
      const secs = seconds % 60;
      return `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
    }

    function updateDisplay() {
      display.textContent = formatTime(remainingTime);
    }

    function startTimer() {
      if (countdownInterval) return;
      countdownInterval = setInterval(() => {
        if (remainingTime <= 0) {
          clearInterval(countdownInterval);
          countdownInterval = null;
          alert('Time is up!');
        } else {
          remainingTime--;
          updateDisplay();
        }
      }, 1000);
    }

    function pauseTimer() {
      clearInterval(countdownInterval);
      countdownInterval = null;
    }

    function resetTimer() {
      clearInterval(countdownInterval);
      countdownInterval = null;
      remainingTime = 0;
      updateDisplay();
    }

    startButton.addEventListener('click', () => {
      const hours = parseInt(document.getElementById('hours').value) || 0;
      const minutes = parseInt(document.getElementById('minutes').value) || 0;
      const seconds = parseInt(document.getElementById('seconds').value) || 0;
      remainingTime = hours * 3600 + minutes * 60 + seconds;
      updateDisplay();
      startTimer();
    });

    pauseButton.addEventListener('click', pauseTimer);
    resetButton.addEventListener('click', resetTimer);

    updateDisplay();
  </script>
</body>
</html>
Count Down Timer tool code

Post a Comment

Contact Form
