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); clock.style.display = 'block';
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);
}
// loadJSON method to open the JSON file.
function loadJSON(path, success, error) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
success(JSON.parse(xhr.responseText));
}
else {
error(xhr);
}
}
};
xhr.open('GET', path, true);
xhr.send();
}
loadJSON("https://sheets.googleapis.com/v4/spreadsheets/1HPNbcQCAFJ52CKKyzM8TwNzoU4tibDgjQyxtTXypW-Y/values/Countdown!G3:H15?alt=json&key=AIzaSyBiATNikKcot6B6N68glvPATuaTqobmlKM", myData,'jsonp');
function myData(Data)
{
const schedule = Data['values'];
// iterate over each element in the schedule
for (var i=0; i
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); initializeClock('clockdiv-mob', endDate); } });
}