No resources match your filters.

'; return; } filteredResources.forEach(resource => { const card = document.createElement('div'); card.className = 'resource-card flex flex-col bg-white p-6 rounded-lg shadow border'; let typeColor = 'bg-slate-500'; if (resource.type === 'video') typeColor = 'bg-red-500'; if (resource.type === 'article') typeColor = 'bg-blue-500'; if (resource.type === 'interactive') typeColor = 'bg-orange-500'; if (resource.type === 'course') typeColor = 'bg-purple-500'; card.innerHTML = `

By ${resource.provider}

${resource.description}

`; resourceGrid.appendChild(card); }); }; // --- EVENT LISTENERS --- subjectFilter.addEventListener('change', renderResources); typeFilter.addEventListener('change', renderResources); // --- PDF DOWNLOAD --- downloadPdfBtn.addEventListener('click', () => { const { jsPDF } = window.jspdf; const doc = new jsPDF(); const selectedSubject = subjectFilter.value; const selectedType = typeFilter.value; const filteredResources = resources.filter(r => { const subjectMatch = selectedSubject === 'all' || r.subject === selectedSubject; const typeMatch = selectedType === 'all' || r.type === selectedType; return subjectMatch && typeMatch; }); doc.setFontSize(22); doc.text('Open Educational Resources List', 105, 20, { align: 'center' }); doc.setFontSize(12); doc.text(`Filters: Subject - ${selectedSubject}, Type - ${selectedType}`, 105, 28, { align: 'center' }); const tableData = filteredResources.map(r => [ r.title, r.subject, r.type, r.provider, r.link ]); doc.autoTable({ head: [['Title', 'Subject', 'Type', 'Provider', 'Link']], body: tableData, startY: 40, theme: 'grid', styles: { fontSize: 8 }, columnStyles: { 4: { cellWidth: 'auto', overflow: 'linebreak' } } }); doc.save('oer-resource-list.pdf'); }); // --- INITIALIZATION --- populateFilters(); renderResources(); });