Skip to main content
  • 3,783 Topics
  • 9,216 Replies
  • 10,262 Members

${video.title}

VIDEO

${video.subtitle}

`; gridContainer.appendChild(card); }); // Step D: Render Pagination renderPagination(totalPages); } function renderPagination(totalPages) { paginationContainer.innerHTML = ''; if (totalPages <= 1) return; for (let i = 1; i <= totalPages; i++) { const btn = document.createElement('button'); btn.innerText = i; btn.className = `page-btn ${i === currentPage ? 'active' : ''}`; btn.onclick = () => { currentPage = i; renderLibrary(); window.scrollTo({ top: 0, behavior: 'smooth' }); }; paginationContainer.appendChild(btn); } } // 5. EVENT LISTENERS // Filter Clicks filterButtons.forEach(btn => { btn.addEventListener('click', (e) => { // Update UI filterButtons.forEach(b => b.classList.remove('active')); e.target.classList.add('active'); // Update State currentFilter = e.target.dataset.filter; currentPage = 1; // Reset to page 1 on filter change renderLibrary(); }); }); // Modal Logic function openModal(videoId) { modal.style.display = 'flex'; // Auto-play enabled iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`; } closeModal.onclick = () => { modal.style.display = 'none'; iframe.src = ''; // Stop video }; window.onclick = (event) => { if (event.target == modal) { modal.style.display = 'none'; iframe.src = ''; } }; // Initial Load renderLibrary();