Ваши билеты

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

<section id="your-tickets">
    <h2>Ваши билеты</h2>
    <ul id="tickets"></ul>
</section>

Рисуйте список из bookings функцией showTickets(): по элементу списка на каждое бронирование, с днём, временем и фильмом и забронированными местами: Пятница 17:30, Роботы в отпуске: C6, C7. В бронировании хранится только id сеанса. День, время и фильм лежат в сеансе с этим id, и find() находит его в showtimes. Поэтому список можно нарисовать только после загрузки сеансов: вызывайте showTickets() в конце loadShowtimes() и снова после каждого бронирования.

Вот и весь проект. Страница расписания «Звёздного света» теперь загружает сеансы из файла с данными и сообщает, когда идёт загрузка или что-то пошло не так. Посетитель может выбрать день, открыть сеанс, выбрать места и увидеть, сколько они стоят, а затем забронировать их с помощью формы, которая проверяет введённое. А страница запоминает его билеты, когда он возвращается. Теперь кинотеатр может менять расписание, правя showtimes.json и не трогая страницу. Сохраните новые и изменённые файлы в папку своего сайта и загрузите папку заново, как в уроке «Выкладываем сайт в интернет», и всё это заработает и там. Только не удивляйтесь, когда откроете showtimes.html прямо из папки на своём компьютере: браузеры не позволяют fetch() читать файлы с вашего диска, поэтому расписание не загрузится. Веб-сервер отвечает на fetch() так же, как предпросмотр, поэтому в интернете страница загружает showtimes.json.

Если хочется продолжить, вы уже знаете всё, что для этого нужно: кнопка отмены для каждого билета (filter(), сохранение, новая отрисовка) или цена каждого бронирования в его элементе списка.

Что дальше. Ваш сайт работает, и теперь пора сделать так, чтобы он выглядел современно. Следующий курс пути, Tailwind CSS, учит другому способу оформлять страницы: вместо собственных правил CSS вы пишете готовые классы прямо в HTML. А затем в проекте «Кинотеатр на Tailwind» вы оформите с его помощью этот самый сайт, включая места и билеты, которые создаёт ваш скрипт.