Construire un système de réservation de billets de cinéma

Introduction

Dans ce projet, vous allez apprendre à construire un système de réservation de billets de cinéma. Le projet consiste à récupérer les données de films de manière asynchrone, à afficher les informations sur le film sur la page web et à implémenter la fonctionnalité de sélection de sièges et de calcul du prix total.

👀 Aperçu

movie reservation system demo

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment récupérer des données de manière asynchrone à l'aide de la bibliothèque axios
Comment afficher les informations sur le film, y compris le nom du film, le prix et la disponibilité des sièges, sur la page web
Comment implémenter la fonctionnalité de sélection de sièges, en mettant à jour le nombre de sièges sélectionnés et le prix total en conséquence
Comment mettre à jour l'affichage pour montrer le nombre actuel de sièges sélectionnés et le prix total

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Récupérer des données de manière asynchrone à l'aide de la bibliothèque axios
Manipuler le DOM pour afficher du contenu dynamique
Implémenter des interfaces utilisateur interactives avec la gestion des événements
Mettre à jour l'UI en fonction des actions de l'utilisateur

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour compléter cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

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

Dans ce qui suit :

index.html est la page principale.
css/style.css est le fichier de style de page fourni.
data.json est le fichier de données qui doit être demandé.
js/axios.min.js est le fichier de bibliothèque de requête axios.
js/script.js est le fichier dans lequel vous devez compléter le code.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la VM et rafraîchissez manuellement la page pour voir l'effet suivant dans votre navigateur :

Image Description

Récupération et affichage de données asynchrones

Dans cette étape, vous allez apprendre à récupérer des données de manière asynchrone à l'aide de la bibliothèque axios et à afficher les informations sur le film sur la page web.

Ouvrez le fichier js/script.js.

Utilisez axios.get() pour récupérer les données à partir du fichier 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);
  });

Le code ci-dessus récupère les données à partir du fichier data.json, puis met à jour le nom et le prix du film dans les nœuds DOM correspondants. Il génère également la zone de sièges en créant une rangée de nœuds de siège pour chaque rangée dans le tableau data.seats, et en ajoutant la classe "occupied" aux sièges déjà réservés.

Sélection de sièges et calcul du prix total

Dans cette étape, vous allez implémenter la fonctionnalité de sélection de sièges et de calcul du prix total.

Ouvrez le fichier js/script.js.
Initialisez les variables pour obtenir tous les nœuds de siège dans la zone de sièges :
```
const seatNodes = document.querySelectorAll(".seat");
```
Initialisez les variables pour suivre le nombre de sièges sélectionnés et le prix total :
```
let selectedSeatsCount = 0;
let totalPrice = 0;
```

Ajoutez un écouteur d'événements de clic à la zone de sièges :

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();
  }
});

Le code ci-dessus ajoute un écouteur d'événements de clic à la zone de sièges. Lorsqu'un siège non occupé est cliqué, il inverse la classe "selected" sur le nœud de siège et met à jour les variables selectedSeatsCount et totalPrice en conséquence.

Implémentez la fonction updateDisplay() pour mettre à jour le nombre de sièges sélectionnés et le prix total :
```
function updateDisplay() {
  count.textContent = selectedSeatsCount;
  total.textContent = totalPrice;
}
```
Cette fonction met à jour le contenu textuel des nœuds avec les IDs "count" et "total" pour afficher le nombre actuel de sièges sélectionnés et le prix total.

Après avoir effectué ces étapes, la fonctionnalité de réservation de billets de cinéma devrait être entièrement implémentée, permettant aux utilisateurs de sélectionner des sièges et de voir le prix total. L'effet final de la page est le suivant :