Избранное

Последний шаг — избранное. Рядом с каждым фильмом появится кнопка, и щелчок по ней отмечает фильм как избранный. Страница должна запоминать избранное, чтобы оно оставалось отмеченным, когда вы откроете страницу снова, например на следующий день, когда будете выбирать фильм с друзьями.

Задача. Добавьте button в li каждого фильма. Щелчок по ней отмечает фильм как избранный, а повторный щелчок снимает отметку. У li избранного фильма есть класс favorite, который стиль страницы уже подсвечивает. В качестве текста кнопки можно взять звёздочки ☆ и ★. Избранное остаётся отмеченным, когда пользователь выбирает жанр или ищет, а также когда страницу открывают снова.

Подсказка: храните избранное в массиве названий, например ["Вверх", "Начало"]. Метод includes() подскажет, есть ли в нём фильм, push() добавит название, а filter() создаст массив без него. После каждого изменения сохраняйте массив и рисуйте список снова. А обработчик щелчка, который вы создаёте внутри цикла, рисующего список, запоминает фильм своего шага цикла:

for (const film of shown) {
    const button = document.createElement("button");
    button.addEventListener("click", function () {
        console.log(film.title);
    });
    // ...
}

Это весь проект. Ваше приложение загружает данные из файла, показывает сообщение во время ожидания и другое — когда что-то пошло не так, рисует страницу по данным, фильтрует её по выбору пользователя и запоминает его избранное в браузере. На тех же идеях построено большинство веб-приложений, которыми вы пользуетесь каждый день. В последнем уроке, «Итоговый проект», вы соберёте всё, что узнали в курсе, в ещё одном приложении.