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

JavaScriptJavaScriptBeginner
Практиковаться сейчас

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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

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

демонстрация системы бронирования билетов на кино

🎯 Задачи

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

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

🏆 Достижения

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript(("JavaScript")) -.-> javascript/NetworkingGroup(["Networking"]) javascript/AdvancedConceptsGroup -.-> javascript/async_prog("Asynchronous Programming") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/NetworkingGroup -.-> javascript/http_req("HTTP Requests") javascript/NetworkingGroup -.-> javascript/json("JSON") subgraph Lab Skills javascript/async_prog -.-> lab-299869{{"Система бронирования билетов на кино"}} javascript/dom_select -.-> lab-299869{{"Система бронирования билетов на кино"}} javascript/dom_manip -.-> lab-299869{{"Система бронирования билетов на кино"}} javascript/event_handle -.-> lab-299869{{"Система бронирования билетов на кино"}} javascript/http_req -.-> lab-299869{{"Система бронирования билетов на кино"}} javascript/json -.-> lab-299869{{"Система бронирования билетов на кино"}} end

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

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

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

├── 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, чтобы улучшить свои навыки.