1
resposta

Minha implementação do desafio do Ingresso

Olá pessoal,

Fiz uma opção com if else que está comentada no app.js e uma segunda forma com switch e case com validações do input quantidade e modal para avisar se os ingressos foram comprados ou se a qtd de ingressos comprados é maior do que os que restam ou se já se esgotaram. Tudo completo no repositorio do github pasta ingresso. Se ajudar alguém.

          // Solução 2 Com modal
let tipoIngresso = document.getElementById('tipo-ingresso');
let pista = document.getElementById('qtd-pista');
let cadeiraSuperior = document.getElementById('qtd-superior');
let cadeiraInferior = document.getElementById('qtd-inferior');
let quantidade = document.getElementById('qtd');
let botao = document.getElementById('botao');
let alerta = document.getElementById('alerta');

let modal = document.getElementById("myModal");
let span = document.getElementsByClassName("close")[0];
let mensagemModal = document.getElementById('mensagem__modal')

let qtdCadeiraInferior = 400;
let qtdCadeiraSuperior = 200;
let qtdPista = 100;

function comprar() {
  let qtd = quantidade.value;

  if (isNaN(qtd) || qtd <= 0) {
    showAlert('Selecione a quantidade de ingressos desejada');
    return;
  }

  let tipo = tipoIngresso.value;
  let estoqueAtual, elementoEstoque;

  switch (tipo) {
    case 'Cadeira inferior':
      estoqueAtual = qtdCadeiraInferior;
      elementoEstoque = cadeiraInferior;
      break;
    case 'Cadeira superior':
      estoqueAtual = qtdCadeiraSuperior;
      elementoEstoque = cadeiraSuperior;
      break;
    case 'pista':
      estoqueAtual = qtdPista;
      elementoEstoque = pista;
      break;
    default:
      alert('Tipo de ingresso inválido!');
      return;
  }

  if (qtd <= estoqueAtual) {
    if (tipo === 'Cadeira inferior') qtdCadeiraInferior -= qtd;
    if (tipo === 'Cadeira superior') qtdCadeiraSuperior -= qtd;
    if (tipo === 'pista') qtdPista -= qtd;
    abrirModal()
    mensagemModal.style.color = 'rgb(13, 194, 25)'
    mensagemModal.innerHTML = `Compra efetuada com sucesso!`
    elementoEstoque.innerHTML = `${estoqueAtual - qtd}`;
  } else if(estoqueAtual === 0) {
    abrirModal()
    mensagemModal.style.color = 'red'
    mensagemModal.textContent = `Ingressos esgotados para ${tipo}.`
  } else {
    abrirModal()
    mensagemModal.style.color = 'orange'
    mensagemModal.innerHTML = `Restam só ${estoqueAtual} ingressos na ${tipo}`;
  }

  quantidade.value = '';
}

function showAlert(message) {
  quantidade.classList.add('animation');
  alerta.textContent = message;
  setTimeout(() => {
    quantidade.classList.remove('animation');
  }, 500);
  quantidade.addEventListener('input', () => {
    alerta.innerHTML = '';
  });
}

botao.addEventListener('click', comprar);

function abrirModal() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
1 resposta

Boaaa, obrigado por compartilhar.