Ссылка на проект
Сделайте каталог эпизодов Star Wars с выводом детальной информации о каждом фильме. Для этого воспользуйтесь API сервисом для получения данных по вселенной Star Wars. Если сервис не доступен, воспользуйтесь https://www.swapi.tech/.
Данные обо всех 6-ти эпизодах можно получить запросом GET. Результат будет содержать массив объектов с информацией об эпизоде.
Подробности одного эпизода можно получить запросом GET https://swapi.dev/api/films/{номер эпизода}, где номер эпизода - это порядковый номер фильма в порядке его выпуска (обратите внимание, это НЕ свойство episode_id, а именно порядковый номер!). IV, V, VI эпизоды имеют номер 1, 2, 3; I, II, III - 4, 5, 6.
Ваше приложение должно иметь 2 вида страниц:
Главная страница.
- На ней загружается и показывается список эпизодов с указанием номера и названия в каждом элементе.
- Элементы должны быть ссылками на детальную страницу эпизода.
Детальная страница.
- Детальная страница эпизода должна загружать и показывать информацию об эпизоде, номер которого должен быть передан в URL страницы.
На детальной странице должны быть следующие элементы:
- h1 заголовок с названием эпизода и его episode_id
- Кнопка "Back to episodes" со ссылкой на список эпизодов (главную).
- Описание из свойства opening_crawl объекта эпизода
- Список планет, встречающихся в эпизоде, с их названиями. Перед списком нужно вывести h2 заголовок "Planets". Получить планеты можно из API с использованием URL из массива planets в объекте эпизода.
- Список рас, встречающихся в эпизоде, с их названиями. Перед списком нужно вывести h2 заголовок "Species".
Получить планеты можно из API с использованием URL из массива species в объекте эпизода. По желанию можете вывести любой список других связанных с эпизодом объектов из соответствующих свойств эпизода по аналогии с планетами и расами. Все запросы, которые можно запустить параллельно, нужно отправлять с помощью Promise.all и убедиться, что они не обрабатываются последовательно.
Код для соответствующей страницы должен загружаться с помощью динамического import'а, то есть только если он нужен на текущей странице. При этом нужно разделять код отрисовки DOM-дерева и код получения данных из API.
Стили также должны загружаться асинхронно из вашего кода. Страница не должна показываться до тех пор, пока все необходимые ресурсы для её отображения не загрузились.
Дополнительно Сделайте так, чтобы переходы по ссылкам не приводили к перезагрузке страницы. Для этого нужно изменить приложение следующим образом:
- Добавьте обработчики события нажатия (click) на ссылки (тэги "a") и вызовите в них preventDefault. Таким образом вы будете предотвращать стандартное поведение браузера, приводящее к переходу на другую страницу с перезагрузкой.
- В обработчиках нажатия на ссылку измените URL текущей страницы. Для этого можно воспользоваться функцией history.pushState(null, '', {значение атрибута href ссылки}). Таким образом вы меняете адрес страницы. Подробнее о методе можете почитать по ссылке.
- Добавьте в тот же обработчик вызов логики перерисовки страницы, соответствующей текущему адресу.
- Добавьте обработчик события window.addEventListener('popstate', ...). Из него нужно вызывать перерисовку страницы в соответствии с текущим адресом. Таким образом вы обеспечите работу своего приложения при нажатии кнопок "Назад" и "Вперёд". Подробнее о событии можете почитать по ссылке.