HOME

/**=====================
    Timer 1 js
==========================**/
/***** CALCULATE THE TIME REMAINING *****/
function getTimeRemaining(endtime) {
    var t = Date.parse(endtime) - Date.parse(new Date());

    /***** CONVERT THE TIME TO A USEABLE FORMAT *****/
    var seconds = Math.floor((t / 1000) % 60);
    var minutes = Math.floor((t / 1000 / 60) % 60);
    var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
    var days = Math.floor(t / (1000 * 60 * 60 * 24));

    /***** OUTPUT THE CLOCK DATA AS A REUSABLE OBJECT *****/
    return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
    };
}

/***** DISPLAY THE CLOCK AND STOP IT WHEN IT REACHES ZERO *****/
function initializeClock(id, endtime) {
  var clock = document.getElementById(id);

  if (!clock) {
    console.error(`Element with id "${id}" not found.`);
    return;
  }

  // Select the <h6> elements within .days, .hours, .minutes, and .seconds
  var daysSpan = clock.querySelector('.days h6');
  var hoursSpan = clock.querySelector('.hours h6');
  var minutesSpan = clock.querySelector('.minutes h6');
  var secondsSpan = clock.querySelector('.seconds h6');

  if (!daysSpan || !hoursSpan || !minutesSpan || !secondsSpan) {
    console.error('Clock element does not contain required child elements (.days > h6, .hours > h6, .minutes > h6, .seconds > h6)');
    return;
  }

  function updateClock() {
    var t = getTimeRemaining(endtime);
    daysSpan.textContent = t.days;
    hoursSpan.textContent = ('0' + t.hours).slice(-2);
    minutesSpan.textContent = ('0' + t.minutes).slice(-2);
    secondsSpan.textContent = ('0' + t.seconds).slice(-2);

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

  updateClock(); // Run once immediately to avoid delay
  var timeinterval = setInterval(updateClock, 1000);
}
/***** SET A VALID END DATE *****/
document.addEventListener('DOMContentLoaded', function () {
  var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
  initializeClock('clockdiv-1', deadline);
  initializeClock('clockdiv-2', deadline);
  initializeClock('clockdiv-3', deadline);
});