webprogrammierung/js/filter.js

function initFilter() {
    const filterSelect = document.getElementById('category-filter');
    const listContainer = document.querySelector('.s-res-list');

    if (!filterSelect || !listContainer) return;

    filterSelect.addEventListener('change', function() {
        const selectedCategory = this.value.toLowerCase().trim();
        const cards = listContainer.querySelectorAll('.s-res-item');

        console.log("--- FILTER GESTARTET ---");
        console.log("Ausgewählt im Dropdown (kleingeschrieben): '" + selectedCategory + "'");

        cards.forEach(card => {
            const cardCategory = (card.getAttribute('data-category') || '').toLowerCase().trim();
            const articleTitle = card.querySelector('.s-res-link')?.textContent.trim() || 'Unbekannt';

            console.log(`Prüfe Artikel "${articleTitle}": Karte hat '${cardCategory}' vs Dropdown '${selectedCategory}'`);

            if (selectedCategory === 'all' || cardCategory === selectedCategory) {
                card.style.style.display = 'flex';
                console.log("-> TREFFER (wird angezeigt)");
            } else {
                card.style.display = 'none';
                console.log("-> KEIN TREFFER (wird ausgeblendet)");
            }
        });
    });
}

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initFilter);
} else {
    initFilter();
}