The video is part of the full course
In this lesson you will
- Describe things with objects and lists with arrays
- Loop over an array with for...of and forEach
- Create elements safely with createElement and textContent
- Filter an array with filter()
So far the menu has been typed into the HTML. Real sites keep content as data and build the page from it, so adding a product means adding one line, not copying a block of HTML. We'll store the menu as an array of objects, draw the cards with a loop, and add an 'Eggless only' filter.
The HTML
The six hand-written cards are gone. In their place: two filter buttons, a line for the count, and an empty grid that JavaScript fills.
<section id="menu">
<h2>Today's menu</h2>
<div class="filters" aria-label="Filter the menu">
<button type="button" data-filter="all" aria-pressed="true">Everything</button>
<button type="button" data-filter="eggless" aria-pressed="false">Eggless only</button>
</div>
<p id="menu-count"></p>
<div class="menu-grid" id="menu-grid"></div>
</section>Continue with the full course
The rest of this lesson, the narrated video, the PDF and the exercise are part of Web Development Foundations. One payment, lifetime access.
Buy the course$39.00
Already bought it? Sign in with the email you paid with.