Countdown

Zu Abschnitt Timer und Countdown mit clearTimeout mit setTimeout()

<div class="counterbox">
   <div class="circle">10</div>
   <div style="display:flex; flex-wrap:nowrap;">
      <button class="btn" id="countStart">Countdown</button>
      <button class="btn" id="countCancel">Cancel</button>
   </div>
</div>
10
// Globale Variablen für den Countdown- und den Cancel-Button
const countStart = document.querySelector("#countStart");
const countCancel = document.querySelector("#countCancel");

// Der Countdown beginnt bei 10 und wird in den Kreis eingesetzt
const start = 10;
document.querySelector(".circle").textContent = 10;

/***********************************************
  function countdown
  time : Zähler, wird in countdown um 1 runtergezählt
  hue : Farbton, wird in countdown um jeweils 60 erhöht
***********************************************/
function countdown(time,hue) {
   document.querySelector(".circle").textContent = time;
   document.querySelector(".circle").setAttribute ("style", 
      `border-color: hsl(${hue},85%,60%); color: hsl(${hue},85%,60%)`);
   
   time -= 1;
   hue += 60;
   
   // Solange time >= 0, wird setTimeout erneut aufgerufen
   if (time >= 0) {
      // Callback-Funktion countdown, mit Verzögerung von 1s, 
      // dem aktuellen Wert von time und von hue
      const timer = setTimeout(countdown, 1000, time, hue);
   }
}

// Event Listener wartet auf den Klick auf den Countdown-Button  
countStart.addEventListener("click", function(time, hue) {
   countdown(start, 30);
});

// Event Listener wartet auf einen Klick auf den Cancel-Button
countCancel.addEventListener("click", function() {
   clearTimeout(timer);
});