Sistema de Reserva de Ingressos para Cinema

Introdução

Neste projeto, você aprenderá como construir um sistema de reserva de ingressos para filmes. O projeto envolve a obtenção assíncrona de dados de filmes, a renderização das informações do filme na página web e a implementação da funcionalidade de seleção de assentos e cálculo do preço total.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como obter dados de forma assíncrona usando a biblioteca axios
• Como renderizar informações sobre filmes, incluindo o nome do filme, preço e disponibilidade de assentos, na página web
• Como implementar a funcionalidade de seleção de assentos, atualizando o número de assentos selecionados e o preço total de acordo
• Como atualizar a exibição para mostrar o número atual de assentos selecionados e o preço total

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Obter dados de forma assíncrona usando a biblioteca axios
• Manipular o DOM (Document Object Model) para exibir conteúdo dinâmico
• Implementar interfaces de usuário interativas com tratamento de eventos
• Atualizar a UI (User Interface) com base nas ações do usuário

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga os passos abaixo para concluir esta etapa:

Abra a pasta do projeto. A estrutura de diretórios é a seguinte:

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

Dentre eles:

• index.html é a página principal.
• css/style.css é o arquivo de estilo da página fornecido.
• data.json é o arquivo de dados que precisa ser solicitado.
• js/axios.min.js é o arquivo da biblioteca de requisição axios.
• js/script.js é o arquivo onde você precisa complementar o código.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra o "Web 8080" no topo da VM e atualize manualmente a página para ver o seguinte efeito no seu navegador:

Obtenção e Renderização Assíncrona de Dados

Nesta etapa, você aprenderá como obter dados de forma assíncrona usando a biblioteca axios e renderizar as informações do filme na página web.

1. Abra o arquivo js/script.js.

2. Use axios.get() para obter os dados do arquivo 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. O código acima obtém os dados do arquivo data.json, em seguida, atualiza o nome e o preço do filme nos nós DOM (Document Object Model) correspondentes. Ele também gera a área de assentos criando uma linha de nós de assentos para cada linha no array data.seats e adicionando a classe "occupied" aos assentos que já estão reservados.

Seleção de Assentos e Cálculo do Preço Total

Nesta etapa, você implementará a funcionalidade de seleção de assentos e cálculo do preço total.

1. Abra o arquivo js/script.js.

2. Inicialize as variáveis para obter todos os nós de assento na área de assentos:

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

3. Inicialize as variáveis para rastrear o número de assentos selecionados e o preço total:

   let selectedSeatsCount = 0;
   let totalPrice = 0;
   

4. Adicione um ouvinte de evento de clique à área de assentos:

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

   O código acima adiciona um ouvinte de evento de clique à área de assentos. Quando um assento que não está ocupado é clicado, ele alterna a classe "selected" no nó do assento e atualiza as variáveis selectedSeatsCount e totalPrice de acordo.

5. Implemente a função updateDisplay() para atualizar o número de assentos selecionados e o preço total:

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

   Esta função atualiza o conteúdo de texto dos nós com os IDs "count" e "total" para exibir o número atual de assentos selecionados e o preço total.

Após concluir estas etapas, a funcionalidade de reserva de ingressos de cinema deve ser totalmente implementada, permitindo que os usuários selecionem assentos e vejam o preço total. O efeito final da página é o seguinte:

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.