Список фильмов

Пора браться за новый проект! В этом мини-проекте вы создадите приложение для киновечера: оно показывает фильмы, из которых можно выбирать, позволяет искать их и запоминает ваши любимые. Как и в прошлых мини-проектах, задание говорит, что должна делать страница, а как это написать — решать вам. Каждое упражнение продолжает предыдущее.

Данные. Фильмы лежат в файле films.json: это массив объектов, по одному на фильм, с названием, годом выхода, жанром и длительностью в минутах:

{ "title": "Вверх", "year": 2009, "genre": "мультфильм", "length": 96 }

Страница. Файл index.html уже готов, в нём есть такие элементы:

• message — абзац для сообщений,
• genre и search — select для выбора жанра и текстовое поле для поиска по названию, оба понадобятся в следующем упражнении,
• films — список фильмов (ul), пока пустой.

Задача. Загрузите фильмы и покажите их в списке films: по одному элементу li на фильм, с названием, годом, жанром и длительностью, например Вверх (2009), мультфильм, 96 мин. Пока фильмы загружаются, показывайте в message текст Загрузка…, а потом снова очистите сообщение. Если фильмы загрузить не удалось, покажите в нём Не удалось загрузить фильмы.

Подсказка: храните фильмы в переменной, а список рисуйте функцией. В следующем упражнении список будет меняться по мере поиска, и вы будете вызывать функцию снова.