Html Css Codepen — Restaurant Menu

h2 { margin-top: 0; }

menuItems.forEach((item) => { const itemText = item.textContent.toLowerCase(); if (itemText.includes(filterValue)) { item.style.display = 'block'; } else { item.style.display = 'none'; } }); }); You can view the complete CodePen example here . restaurant menu html css codepen

p { margin-bottom: 10px; }

const filterInput = document.getElementById('filter-input'); h2 { margin-top: 0; } menuItems

header nav ul { list-style: none; margin: 0; padding: 0; } h2 { margin-top: 0

/* styles.css */

#filter-input { padding: 10px; font-size: 18px; border: 1px solid #ccc; border-radius: 5px; width: 100%; max-width: 400px; margin-bottom: 20px; } // script.js