li.appendChild(icon); li.appendChild(content); foodListEl.appendChild(li); }); } // Event listeners for category buttons categoryButtons.forEach(btn => { btn.addEventListener('click', () => { btn.classList.toggle('active'); const isActive = btn.classList.contains('active'); btn.setAttribute('aria-pressed', isActive.toString()); renderFoods(); }); }); searchInputEl.addEventListener('input', renderFoods); toggleDarkBtn.addEventListener('click', () => { darkMode = !darkMode; localStorage.setItem('darkMode', darkMode); if (darkMode) { bodyEl.classList.add('dark'); toggleDarkBtn.textContent = "☀️"; toggleDarkBtn.setAttribute('aria-pressed', 'true'); } else { bodyEl.classList.remove('dark'); toggleDarkBtn.textContent = "🌙"; toggleDarkBtn.setAttribute('aria-pressed', 'false'); } }); // Initial render with all categories active renderFoods();