Making a timer with code that can easily be reset

Question

I'm making a shot clock for my school's basketball team. A shot clock is a timer that counts down from 24 seconds. I have the skeleton for the timer right now, but I need to have particular key bindings. The key bindings should allow me to rest, pause, and play the timer.

var count=24;

var counter=setInterval(timer, 1000);

function timer()
{
  count=count-1;
  if (count <= 0)
  {
     clearInterval(counter);
     return;
  }

 document.getElementById("timer").innerHTML=count + " secs";
}

Answer 1

I'm not sure what you meant by "rest" the timer, I interpret this as "pause", so:

• Space = Pause / Play.
• R = Reset.

var
  count=24,
  counter = setInterval(timer, 1000),
  running = true;

function timer() {
  count -= 1;
  
  if (count <= 0) {
    clearInterval(counter);
  }
  
  document.getElementById("timer").innerHTML = count + " secs";
}

window.addEventListener("keydown", function(e) {
  switch(e.keyCode) {
  
    case 32: // PLAY
      running ? clearInterval(counter) : counter = setInterval(timer, 1000);
      running = !running;
      break;
    
    case 82: // RESET
      clearInterval(counter);
      document.getElementById("timer").innerHTML = 24 + " secs";
      count = 24;
      running = false;
  }
});

<div id="timer">24 secs</div>