Niagara Parks Events Calendar

//This Timeout removes the 'active' class from the first node and adds it back so it triggers setTimeout(() => { const boxes = document.querySelectorAll('.event-slider__item'); const dateSlide = document.querySelectorAll('.event-slider__toggles li'); boxes[0].classList.remove('active'); dateSlide[0].classList.remove('active'); setTimeout(() => { boxes[0].classList.add('active'); dateSlide[0].classList.add('active'); //This code adds text above the calendar date const calendarDate = document.querySelector('.calendar__date'); const weekOfText = document.createElement("h1"); weekOfText.textContent = "Events of the Week"; weekOfText.classList.add("dateTitle"); calendarDate.appendChild(weekOfText); console.log(weekOfText); //This section contains the button code to remove the 'active' classes for all slides when click and keeps track of which button was click to apply an 'active' to the equivalent buttons slide //FIRST BUTTON CLICK if (dateSlide[0]) { dateSlide[0].addEventListener('click', function(){ currentBoxIndex = 0; for (let i = 0; i < boxes.length; i++) { boxes[i].classList.remove('active'); dateSlide[i].classList.remove('active'); }; boxes[0].classList.add('active'); dateSlide[0].classList.add('active'); }); }; //SECOND BUTTON CLICK if (dateSlide[1]) { dateSlide[1].addEventListener('click', function(){ currentBoxIndex = 1; for (let i = 0; i < boxes.length; i++) { boxes[i].classList.remove('active'); dateSlide[i].classList.remove('active'); }; boxes[1].classList.add('active'); dateSlide[1].classList.add('active'); }); }; //THIRD BUTTON CLICK if (dateSlide[2]) { dateSlide[2].addEventListener('click', function(){ currentBoxIndex = 2; for (let i = 0; i < boxes.length; i++) { boxes[i].classList.remove('active'); dateSlide[i].classList.remove('active'); }; boxes[2].classList.add('active'); dateSlide[2].classList.add('active'); }); }; //FOURTH BUTTON CLICK if (dateSlide[3]) { dateSlide[3].addEventListener('click', function(){ currentBoxIndex = 3; for (let i = 0; i < boxes.length; i++) { boxes[i].classList.remove('active'); dateSlide[i].classList.remove('active'); }; boxes[3].classList.add('active'); dateSlide[3].classList.add('active'); }); }; //FIFTH BUTTON CLICK if (dateSlide[4]) { dateSlide[4].addEventListener('click', function(){ currentBoxIndex = 4; for (let i = 0; i < boxes.length; i++) { boxes[i].classList.remove('active'); dateSlide[i].classList.remove('active'); }; boxes[4].classList.add('active'); dateSlide[4].classList.add('active'); }); }; //SIXTH BUTTON CLICK if (dateSlide[5]) { dateSlide[5].addEventListener('click', function(){ currentBoxIndex = 5; for (let i = 0; i < boxes.length; i++) { boxes[i].classList.remove('active'); dateSlide[i].classList.remove('active'); }; boxes[5].classList.add('active'); dateSlide[5].classList.add('active'); }); }; //SEVENTH BUTTON CLICK if (dateSlide[6]) { dateSlide[6].addEventListener('click', function(){ currentBoxIndex = 6; for (let i = 0; i < boxes.length; i++) { boxes[i].classList.remove('active'); dateSlide[i].classList.remove('active'); }; boxes[6].classList.add('active'); dateSlide[6].classList.add('active'); }); }; //EIGHTH BUTTON CLICK if (dateSlide[7]) { dateSlide[7].addEventListener('click', function(){ currentBoxIndex = 7; for (let i = 0; i < boxes.length; i++) { boxes[i].classList.remove('active'); dateSlide[i].classList.remove('active'); }; boxes[7].classList.add('active'); dateSlide[7].classList.add('active'); }); }; //NINTH BUTTON CLICK if (dateSlide[8]) { dateSlide[8].addEventListener('click', function(){ currentBoxIndex = 8; for (let i = 0; i < boxes.length; i++) { boxes[i].classList.remove('active'); dateSlide[i].classList.remove('active'); }; boxes[8].classList.add('active'); dateSlide[8].classList.add('active'); }); }; //TENTH BUTTON CLICK if (dateSlide[9]) { dateSlide[9].addEventListener('click', function(){ currentBoxIndex = 9; for (let i = 0; i { const boxes = document.querySelectorAll('.event-slider__item'); const dateSlide = document.querySelectorAll('.event-slider__toggles li'); let currentBoxIndex = 0; let userSetNumber = false; function showNextBox(passedBoolean) { for (let i = 0; i < boxes.length; i++) { boxes[i].classList.remove('active'); dateSlide[i].classList.remove('active'); }; currentBoxIndex = (currentBoxIndex + 1) % boxes.length; boxes[currentBoxIndex].classList.add('active'); dateSlide[currentBoxIndex].classList.add('active'); } function startBoxCycling() { showNextBox(); const startRotation = setInterval(showNextBox, 8100); } setTimeout(startBoxCycling(), 5100) }, "8100");

SCROLL

AWAY YOU GO!

The following items have been added to your itinerary: