Выбор дня

В субботу утром посетитель хочет узнать, что идёт сегодня, а не все выходные. Над таблицей добавьте кнопки дней: Все дни, Пятница, Суббота и Воскресенье. Нажатие на день показывает только его сеансы.

Каждая кнопка сообщает скрипту свой день в атрибуте data-day, как в уроке «События и формы». Дни записаны точно так же, как в showtimes.json, чтобы скрипт мог сравнивать их с помощью ===:

<div id="days">
    <button data-day="all" class="active">Все дни</button>
    <button data-day="Пятница">Пятница</button>
    <button data-day="Суббота">Суббота</button>
    <button data-day="Воскресенье">Воскресенье</button>
</div>

У кнопок нет id. Повесьте на #days один обработчик нажатия и находите нажатую кнопку с помощью event.target.closest("button"); нажатие рядом с кнопками даёт null. Храните выбранный день в переменной chosenDay, которая сначала равна "all". В showShowtimes() рисуйте только сеансы выбранного дня с помощью filter(), если только это не "all". Не загружайте файл заново: рисуйте таблицу снова из уже имеющихся сеансов.

Выбранная кнопка. Посетитель должен видеть, какой день он смотрит, поэтому у выбранной кнопки есть класс active. В начале выбраны «Все дни», так что у этой кнопки класс уже есть в HTML. Запоминайте активную кнопку в переменной, как вы запоминали выбранный рецепт в уроке «События и формы»: при нажатии уберите класс у неё, добавьте его нажатой кнопке и сохраните нажатую кнопку в переменной. Первую активную кнопку можно найти селектором, как в CSS: элемент с классом active внутри #days:

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

Типичные ошибки:

• День, записанный по-разному в кнопке и в данных, например data-day="пятница". "пятница" === "Пятница" — это false, поэтому таблица остаётся пустой.
• Забыть убрать класс у старой кнопки: после нескольких нажатий все кнопки выглядят выбранными.