<h1>Countdown Timer</h1>
<div id="timer">
  <div id="hrs"></div>: <div id="mins"></div>: <div id="secs"></div>
</div>
<div>
  <button type="button" id="start">Start</button>
  <button type="button" class="none" id="pause">Pause</button>
  <button type="button" class="none" id="reset">Reset</button>
</div>
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
h1 {
  margin: 0;
}
#timer {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 2rem;
}
#hrs,
#mins,
#secs {
  border: 1px solid lightgray;
  padding: 4px 16px;
  border-radius: 5px;
  box-shadow: 2px 1px 2px #dedede;
}
.none {
  display: none;
}
button {
  border-radius: 24px;
  padding: 8px 24px;
  font-size: 1.5rem;
  filter: grayscale(0.4);
}
button:hover {
  filter: grayscale(0);
  cursor: pointer;
}
#start {
  background: lightgreen;
  border: 1px solid green;
}
#pause {
  background: lightyellow;
  border: 1px solid yellow;
}
#reset {
  background: red;
  border: 1px solid red;
}

/* * https://frontendeval.com/questions/countdown-timer * * Create a countdown timer that notifies the user */ const timer = {
  hrs: 0,
  mins: 0,
  secs: 0
};
const hrs = document.getElementById("hrs");
hrs.textContent = parseInt(timer.hrs);
const mins = document.getElementById("mins");
mins.textContent = timer.mins;
const secs = document.getElementById("secs");
secs.textContent = timer.secs;
const start = document.getElementById("start");
const pause = document.getElementById("pause");
const reset = document.getElementById("reset");
start.addEventListener("click", startTimer);
pause.addEventListener("click", pauseTimer);
reset.addEventListener("click", resetTimer);
let timerInterval;
document.title = "timer";
function startTimer() {
  start.classList.add("none");
  pause.classList.remove("none");
  reset.classList.remove("none");
  timerInterval = setInterval(() => {
    timer.secs += 1;
    if (timer.secs === 60) {
      timer.mins++;
      timer.secs = 0;
    }
    if (timer.mins === 60) {
      timer.hrs++;
      timer.mins = 0;
    }
    updateTimer();
  }, 1000);
}
function pauseTimer() {
  if (timerInterval) {
    start.classList.remove("none");
    pause.classList.add("none");
    clearInterval(timerInterval);
  }
}
function resetTimer() {
  if (timerInterval) {
    clearInterval(timerInterval);
    timer.hrs = 0;
    timer.mins = 0;
    timer.secs = 0;
    updateTimer();
    start.classList.remove("none");
    pause.classList.add("none");
    reset.classList.add("none");
    timerInterval = null;
  }
}
function updateTimer() {
  secs.textContent = timer.secs;
  mins.textContent = timer.mins;
  hrs.textContent = timer.hrs;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.