Countdown timer with dynamic date and title

Question

I found a count down timer that has a series of events coming up, and can automatically update to show the next event

What I would like to do is add a string to this so I can update the title of the event as well as the timer

for example

Race title "countdown timer"

I thought of two ways i could go about this but lacking the knowledge of how to implement

Add the string onto the array and somehow call it depending on which part of the array its showing
Make a switch statement that holds the different titles and call it based off of the array number its using

If anyone could help it would be much appreciated

Javascript and HTML:

      const schedule = [
      ['Feb 25 2021', 'Feb 9 2021', "race 1"],
      ['Feb 9 2021', 'Apr 20 2021', "race 2"],
      ['Apr 20 2022', 'Jul 25 2023', "race 3"]
      ];


      function getTimeRemaining(endtime) {
      const total = Date.parse(endtime) - Date.parse(new Date());
      const seconds = Math.floor((total / 1000) % 60);
      const minutes = Math.floor((total / 1000 / 60) % 60);
      const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
      const days = Math.floor(total / (1000 * 60 * 60 * 24));

      return {
      total,
      days,
      hours,
      minutes,
      seconds
      };
      }

      function initializeClock(id, endtime) {
      const clock = document.getElementById(id);
      const daysSpan = clock.querySelector('.days');
      const hoursSpan = clock.querySelector('.hours');
      const minutesSpan = clock.querySelector('.minutes');
      const secondsSpan = clock.querySelector('.seconds');

      function updateClock() {
      const t = getTimeRemaining(endtime);

      daysSpan.innerHTML = t.days;
      hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
      minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
      secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

      if (t.total <= 0) {
        clearInterval(timeinterval);
      }
      }

      updateClock();
      const timeinterval = setInterval(updateClock, 1000);
      }

      // iterate over each element in the schedule
      for (var i=0; i<schedule.length; i++) {
      var startDate = schedule[i][0];
      var endDate = schedule[i][1];

      // put dates in milliseconds for easy comparisons
      var startMs = Date.parse(startDate);
      var endMs = Date.parse(endDate);
      var currentMs = Date.parse(new Date());

      // if current date is between start and end dates, display clock
      if (endMs > currentMs && currentMs >= startMs ) {
      initializeClock('clockdiv', endDate);

      }
      }

      schedule.forEach(([startDate, endDate]) => {
      // put dates in milliseconds for easy comparisons
      const startMs = Date.parse(startDate);
      const endMs = Date.parse(endDate);
      const currentMs = Date.parse(new Date());

      // if current date is between start and end dates, display clock
      if (endMs > currentMs && currentMs >= startMs ) {
      initializeClock('clockdiv', endDate);
      }
      });

      var race = i;

      switch (race) {
      case 1:
      race = "race 1"
      break;
      case 2:
        race = "race 2"
      break;
      case 3:
        race = "race 3"
      break;
      default:
        race = "end of season"
      }

      document.querySelector('.nextRace').innerHTML = race;

<div>
  Next Race<br>
  <span class="nextRace"></span>
</div>

<div id="clockdiv">

  <span class="race title"></span> Days: <span class="days"></span><br> Hours: <span class="hours"></span><br> Minutes: <span class="minutes"></span><br> Seconds: <span class="seconds"></span>
</div>

You have overlapping dates in the array. Should both titles show? Like Race1 and Race2 until feb 10? — mplungjan, Mar 22 '21 at 14:21
@mplungjan sorry for the confusion i've updated that part of the code. there should only be one title that show linked to the timer that display the countdown of the date ending soonest. hope that makes sense — mike, Mar 22 '21 at 16:24
I get that the next race is race 3, which is incorrect since that was on 28 Feb, nearly a month ago. The time doesn't run at all. `new Date('Feb 25 2021')` is problematic, see [*Why does Date.parse give incorrect results?*](https://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results) — RobG, Mar 23 '21 at 00:19
@RobG sorry about that, I'ts now fixed so the counter works again. I'm just trying to work out how to change the title of the race depending on what race is showing on the counter — mike, Mar 23 '21 at 09:00

mike · Accepted Answer · 2021-03-31T15:54:18.897

After some time and coming back to this with a fresh brain i have worked it out

all i needed to do was place the switch statement in the section of the statement that loops the varible i. So that the variable picks up on the correct loop and not the number of date arrays

  // iterate over each element in the schedule
    for (var i = 0; i < schedule.length; i++) {
      var startDate = schedule[i][0];
      var endDate = schedule[i][1];

      // put dates in milliseconds for easy comparisons
      var startMs = Date.parse(startDate);
      var endMs = Date.parse(endDate);
      var currentMs = Date.parse(new Date());

      // if current date is between start and end dates, display clock
      if (endMs > currentMs && currentMs >= startMs) {
        initializeClock('clockdiv', endDate);

        var race = i;

        switch (race) {
          case 0:
            track = "race 1"
            break;
          case 1:
            track = "race 2"
            break;
          case 2:
            track = "race 3"
            break;
          
          default:
            track = "end of season"
        }

      }

    }

Countdown timer with dynamic date and title

1 Answers1