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

🎯 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

Skills Graph

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:

Obtener y renderizar datos de manera asíncrona

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.

1. Abre el archivo js/script.js.

2. 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);
     });

3. 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.

1. Abre el archivo js/script.js.

2. Inicializa las variables para obtener todos los nodos de asiento en el área de asientos:

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

3. Inicializa las variables para controlar el número de asientos seleccionados y el precio total:

   let selectedSeatsCount = 0;
   let totalPrice = 0;

4. 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.

5. 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:

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.