Countdown Timer every 15-Minutes in the hour

Question

I have a webinar that runs every 15 minutes of every hour of the day (EG: 11:00, 11:15, 11:30 & 11:45).

I'd like a countdown timer that shows the remaining minutes until the next start time and all I can find from days of searches and trying to figure this out myself is an hourly countdown.

My question is, how do I update this code for be every 15 minutes not every 60.

<script>
/* Return minutes and seconds to next hour
** @returns {Object} minutes: minutes remaining
**                   seconds: seconds remaining
*/
function getTimeRemaining() {
  var t = Date.now();
  var seconds = (60 - Math.floor(t % 6e4 / 1e3)) % 60;
  var minutes = 60 - Math.ceil(t % 3.6e6 / 6e4) + (seconds? 0:1);
  return {
    'minutes': ('0' + minutes).slice(-2),
    'seconds': ('0' + seconds).slice(-2)      };
}

// Simple show remaining function
function showRemaining() {
  var r = getTimeRemaining();
  document.getElementById('clock').textContent = (r.minutes + ':' + ('0' + r.seconds).slice(-2));
  // Run again just after next full second
  setTimeout(showRemaining, 1020 - (Date.now() % 1000));
}

showRemaining();
</script>

Answer 1

That solution seems overly complicated and you should be definitely using setInterval for a task where you have to update something every x seconds, recursively calling setTimeout is a bad idea. Here is a solution that is much more understandable:

const runEvery = 15 * 60; // 15 minutes in seconds

const showRemaining = () => {
  // get current time in seconds and find when the next run starts in seconds
  const seconds = Math.round(Date.now() / 1000);
  const nextRun = runEvery * Math.ceil(seconds / runEvery);

  const timeLeft = nextRun - seconds;

  const minutesLeft = Math.floor(timeLeft / 60);
  const secondsLeft = timeLeft % 60;

  document.getElementById('clock').textContent = minutesLeft + ':' + ('0' + secondsLeft).slice(-2);
}

showRemaining();
setInterval(showRemaining, 1000);

<div id="clock"></div>