Construir un sistema de reserva de boletos de cine

Introducción

En este proyecto, aprenderás a construir un sistema de reserva de boletos de cine. El proyecto implica obtener datos de películas de manera asíncrona, renderizar la información de las películas en la página web y implementar la funcionalidad de selección de asientos y cálculo del precio total.

👀 Vista previa

demo del sistema de reserva de películas

🎯 Tareas

En este proyecto, aprenderás:

Cómo obtener datos de manera asíncrona utilizando la librería axios
Cómo renderizar información de películas, incluyendo el nombre de la película, el precio y la disponibilidad de asientos, en la página web
Cómo implementar la funcionalidad de selección de asientos, actualizando el número de asientos seleccionados y el precio total en consecuencia
Cómo actualizar la visualización para mostrar el número actual de asientos seleccionados y el precio total

🏆 Logros

Después de completar este proyecto, podrás:

Obtener datos de manera asíncrona utilizando la librería axios
Manipular el DOM para mostrar contenido dinámico
Implementar interfaces de usuario interactivas con manejo de eventos
Actualizar la IU en función de las acciones del usuario

Configurar la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

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

Entre ellos:

index.html es la página principal.
css/style.css es el archivo de estilo de la página proporcionado.
data.json es el archivo de datos que se necesita solicitar.
js/axios.min.js es el archivo de la librería de solicitudes axios.
js/script.js es el archivo donde necesitas complementar el código.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

A continuación, abre "Web 8080" en la parte superior de la VM y actualiza manualmente la página para ver el siguiente efecto en tu navegador:

Descripción de la imagen

Obtención y representación de datos asíncronos

En este paso, aprenderás a obtener datos de manera asíncrona utilizando la librería axios y a renderizar la información de las películas en la página web.

Abre el archivo js/script.js.

Utiliza axios.get() para obtener los datos del archivo 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);
  });

El código anterior obtiene los datos del archivo data.json, luego actualiza el nombre y el precio de la película en los nodos DOM correspondientes. También genera el área de asientos creando una fila de nodos de asiento para cada fila en la matriz data.seats y agregando la clase "ocupado" a los asientos que ya han sido reservados.

Selección de asientos y cálculo del precio total

En este paso, implementarás la funcionalidad de selección de asientos y cálculo del precio total.

Abre el archivo js/script.js.
Inicializa las variables para obtener todos los nodos de asiento en el área de asientos:
```
const seatNodes = document.querySelectorAll(".seat");
```
Inicializa las variables para controlar el número de asientos seleccionados y el precio total:
```
let selectedSeatsCount = 0;
let totalPrice = 0;
```

Agrega un evento de clic al área de asientos:

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

El código anterior agrega un evento de clic al área de asientos. Cuando se hace clic en un asiento no ocupado, se alterna la clase "selected" en el nodo del asiento y se actualizan las variables selectedSeatsCount y totalPrice en consecuencia.

Implementa la función updateDisplay() para actualizar el número de asientos seleccionados y el precio total:
```
function updateDisplay() {
  count.textContent = selectedSeatsCount;
  total.textContent = totalPrice;
}
```
Esta función actualiza el contenido de texto de los nodos con los IDs "count" y "total" para mostrar el número actual de asientos seleccionados y el precio total.

Después de completar estos pasos, la funcionalidad de reserva de boletos de cine debería estar completamente implementada, permitiendo a los usuarios seleccionar asientos y ver el precio total. El efecto final de la página es el siguiente: