Система бронирования билетов на кино

Введение

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

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• Получать данные асинхронно с использованием библиотеки axios
• Отображать информацию о фильмах, включая название фильма, цену и доступность мест, на веб-странице
• Реализовать функциональность выбора мест, соответствующим образом обновляя количество выбранных мест и общую стоимость
• Обновлять отображение для отображения текущего количества выбранных мест и общей стоимости

🏆 Достижения

После завершения этого проекта вы сможете:

• Получать данные асинхронно с использованием библиотеки axios
• Управлять DOM для отображения динамического контента
• Реализовывать интерактивные пользовательские интерфейсы с обработкой событий
• Обновлять UI в соответствии с действиями пользователя

Skills Graph

Настройка структуры проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура каталогов следующая:

├── css
│   └── style.css
├── data.json
├── index.html
├── effect.gif
└── js
    ├── axios.min.js
    └── script.js

В них:

• index.html - главная страница.
• css/style.css - предоставленный файл стиля страницы.
• data.json - файл с данными, который необходимо запросить.
• js/axios.min.js - файл библиотеки запросов axios.
• js/script.js - файл, в котором необходимо дополнить код.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и вручную обновите страницу, чтобы увидеть следующее в вашем браузере:

Асинхронное получение и отображение данных

В этом шаге вы научитесь получать данные асинхронно с использованием библиотеки axios и отображать информацию о фильмах на веб-странице.

1. Откройте файл js/script.js.

2. Используйте axios.get() для получения данных из файла data.json:

   let data = {};
   axios
     .get("../data.json")
     .then((res) => {
       console.log(res);
       data = res.data;
       movieNameNode.innerHTML = data.name;
       moviePriceNode.innerHTML = data.price;
       data.seats.forEach((item) => {
         let row = document.createElement("div");
         row.className = "row";
         item.forEach((item) => {
           let seat = document.createElement("div");
           seat.className = "seat";
           row.appendChild(seat);
           if (item) {
             seat.classList.add("occupied");
           }
         });
         seatAreaNode.appendChild(row);
       });
     })
     .catch((err) => {
       console.log(err);
     });

3. Код выше получает данные из файла data.json, затем обновляет название фильма и цену в соответствующих DOM-элементах. Он также генерирует зону посадочных мест, создавая ряд элементов для каждого ряда в массиве data.seats и добавляя класс "occupied" к занятым местам.

Выбор мест и расчет общей стоимости

В этом шаге вы реализуете функциональность выбора мест и расчета общей стоимости.

1. Откройте файл js/script.js.

2. Инициализируйте переменные для получения всех узлов мест в зоне посадочных мест:

   const seatNodes = document.querySelectorAll(".seat");

3. Инициализируйте переменные для отслеживания количества выбранных мест и общей стоимости:

   let selectedSeatsCount = 0;
   let totalPrice = 0;

4. Добавьте обработчик события клика к зоне посадочных мест:

   seatAreaNode.addEventListener("click", (event) => {
     const clickedSeat = event.target;
     if (
       clickedSeat.classList.contains("seat") &&
       !clickedSeat.classList.contains("occupied")
     ) {
       clickedSeat.classList.toggle("selected");
       if (clickedSeat.classList.contains("selected")) {
         selectedSeatsCount++;
         totalPrice += data.price;
       } else {
         selectedSeatsCount--;
         totalPrice -= data.price;
       }
   
       updateDisplay();
     }
   });

   Код выше добавляет обработчик события клика к зоне посадочных мест. Когда на незанятое место кликают, он переключает класс "selected" на узле места и соответствующим образом обновляет переменные selectedSeatsCount и totalPrice.

5. Реализуйте функцию updateDisplay(), чтобы обновить количество выбранных мест и общую стоимость:

   function updateDisplay() {
     count.textContent = selectedSeatsCount;
     total.textContent = totalPrice;
   }

   Эта функция обновляет текстовое содержимое узлов с идентификаторами "count" и "total", чтобы отобразить текущее количество выбранных мест и общую стоимость.

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

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.