Choosing a Day

On a Saturday morning, a visitor wants to know what's on today, not all weekend. Above the table, add buttons for the days: All days, Friday, Saturday and Sunday. A click on a day shows only its showtimes.

Each button tells the script its day in a data-day attribute, as in the lesson Events and Forms. The days are written exactly as in showtimes.json, so that the script can compare them with ===:

<div id="days">
    <button data-day="all" class="active">All days</button>
    <button data-day="Friday">Friday</button>
    <button data-day="Saturday">Saturday</button>
    <button data-day="Sunday">Sunday</button>
</div>

The buttons have no ids. Give #days one click handler, and find the clicked button with event.target.closest("button"); a click next to the buttons gives null. Keep the chosen day in a variable, chosenDay, which starts as "all". In showShowtimes(), draw only the showtimes of the chosen day, with filter(), unless it's "all". Don't load the file again: draw the table again from the showtimes you already have.

The chosen button. The visitor should see which day they're looking at, so the chosen button has the class active. At the start, it's All days, so that button has the class in the HTML already. Remember the active button in a variable, as you remembered the chosen recipe in the lesson Events and Forms: on a click, remove the class from it, add it to the clicked button, and keep the clicked button in the variable. You find the first active button with a selector as in CSS, the element with the class active inside #days:

let activeDayButton = document.querySelector("#days .active");

Typical mistakes:

• A day written differently in the button and in the data, such as data-day="friday". "friday" === "Friday" is false, so the table stays empty.
• Forgetting to remove the class from the old button: after a few clicks, all the buttons look chosen.