script.js

document.addEventListener('DOMContentLoaded', () => {
    const searchInput = document.getElementById('searchInput');
    const categoryFilter = document.getElementById('categoryFilter');
    const elements = document.querySelectorAll('.element');

    function filterElements() {
        const searchTerm = searchInput.value.toLowerCase();
        const selectedCategory = categoryFilter.value;

        elements.forEach(element => {
            const name = element.dataset.name.toLowerCase();
            const symbol = element.querySelector('.symbol').textContent.toLowerCase();
            const category = element.dataset.category;

            // Check if element matches search AND category
            const matchesSearch = name.includes(searchTerm) || symbol.includes(searchTerm);
            const matchesCategory = selectedCategory === 'all' || category === selectedCategory;

            if (matchesSearch && matchesCategory) {
                element.classList.remove('faded');
            } else {
                element.classList.add('faded');
            }
        });
    }

    // Add event listeners to trigger filtering when the user types or selects
    searchInput.addEventListener('input', filterElements);
    categoryFilter.addEventListener('change', filterElements);
});