Timer

Pure HTML

let timerInterval;

document.getElementById("start-btn").addEventListener("click", function () {
  const minutesInput = document.getElementById("minutes");
  const minutes = parseInt(minutesInput.value);

  if (isNaN(minutes) || minutes <= 0) {
    alert("Please enter a valid positive number of minutes.");
    return;
  }

  if (timerInterval) {
    clearInterval(timerInterval); // Очищаем предыдущий таймер, если он существует
  }

  startTimer(minutes);
});

document.getElementById("stop-btn").addEventListener("click", function () {
  clearInterval(timerInterval);
  updateTimerDisplay(0); // Сбрасываем отображаемое время на 00:00
  switchToInput();
});

function startTimer(minutes) {
  let timeLeft = minutes * 60;
  switchToDisplay();

  updateTimerDisplay(timeLeft);

  timerInterval = setInterval(() => {
    timeLeft--;

    if (timeLeft <= 0) {
      clearInterval(timerInterval);
      switchToInput();
    }

    updateTimerDisplay(timeLeft);
  }, 1000);
}

function updateTimerDisplay(timeLeft) {
  const minutes = Math.floor(timeLeft / 60);
  const seconds = timeLeft % 60;
  document.getElementById("time-left").textContent =
    `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
}

function switchToDisplay() {
  document.getElementById("timer-input").classList.add("hidden");
  document.getElementById("timer-display").classList.remove("hidden");
}

function switchToInput() {
  document.getElementById("timer-input").classList.remove("hidden");
  document.getElementById("timer-display").classList.add("hidden");
  document.getElementById("minutes").value = ""; // Очищаем поле ввода
}

HTML TimerCSS TimerTS Timer