Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Projeto Ingresso Online

Referente ao curso Lógica de programação: praticando com desafios, no capítulo Projeto Ingresso Online e atividade Faça como eu fiz: outros tipos de ingressos

por Manuelly Souza De Oliveira
| 27.9k xp | 11 posts

Olá, segue abaixo o meu resultado do projeto. Para mim essa forma encaixou bem, mas sinto que teria como compactar as ações. Outra dúvida é como limpar o campo Escolha o tipo logo que a página é carregada (ainda não testei uma function).


let qtdPista = parseFloat(document.getElementById('qtd-pista').textContent);
let qtdSuperior = parseInt(document.getElementById('qtd-superior').textContent);
let qtdInferior = parseInt(document.getElementById('qtd-inferior').textContent);

//obs da function comprar():
// --> comprar um dos tipos oferecidos
//ifelse (qtdIngresso > qtdPista) --> caso a pessoa queira comprar mais ingressos do que disponiveis em um tipo.
//já possui o desafio 1 do hora da prática.
function comprar() {
    let tipo = document.getElementById('tipo-ingresso').value;
    let qtdIngresso = document.getElementById('qtd').value;

    if (isNaN(qtd) || qtd <= 0) {
        alert('Por favor, insira uma quantidade válida.');
        return;
    }

    if(tipo == 'pista' && qtdPista > 0) {
        if (qtdIngresso > qtdPista) {
            alert('Quantidade indisponível para Pista.');            
        }else{
            qtdPista = qtdPista - qtdIngresso;
            let atualizarPista = document.getElementById('qtd-pista');
            atualizarPista.innerHTML = `<span id="qtd-pista">${qtdPista}</span>`;
            alert('Compra realizada com sucesso!');
        }
    }else if (tipo == 'superior' && qtdSuperior > 0){
        if(qtdIngresso > qtdSuperior){
            alert('Quantidade indisponível para Cadeira Superior.');
        }else{
            qtdSuperior = qtdSuperior - qtdIngresso;
            let atualizarSuperior = document.getElementById('qtd-superior');
            atualizarSuperior.innerHTML = `<span id="qtd-superior">${qtdSuperior}</span>`;
            alert('Compra realizada com sucesso!');
        }
    }else if(tipo == 'inferior' && qtdInferior > 0){
        if (qtdIngresso > qtdInferior) {
            alert('Quantidade indisponível para Cadeira Inferior.');
        } else {
            qtdInferior = qtdInferior - qtdIngresso;
            let atualizarInferior = document.getElementById('qtd-inferior');
            atualizarInferior.innerHTML = `<span id="qtd-inferior">${qtdInferior}</span>`;
            alert('Compra realizada com sucesso!');            
        }

    }else{
        alert('Lamentamos! Os ingressos esgotaram.');
    }
}

Aceitando sugestões

2 respostas
solução!
por Renan Lima
| 3728.7k xp | 7885 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Manuelly.

Tudo bem?

Primeiramente, parabéns pelo progresso no seu projeto! Vamos tentar melhorar e compactar um pouco o seu código, além de responder à sua dúvida sobre como limpar o campo "Escolha o tipo" quando a página é carregada.

Compactando o código

Podemos reduzir a repetição no seu código utilizando uma função auxiliar para atualizar a quantidade de ingressos e exibir mensagens. Veja como pode ficar:

let qtdPista = parseFloat(document.getElementById('qtd-pista').textContent);
let qtdSuperior = parseInt(document.getElementById('qtd-superior').textContent);
let qtdInferior = parseInt(document.getElementById('qtd-inferior').textContent);

function atualizarQuantidade(tipo, qtdIngresso) {
    let elemento = document.getElementById(`qtd-${tipo}`);
    let quantidadeAtual = parseInt(elemento.textContent);

    if (qtdIngresso > quantidadeAtual) {
        alert(`Quantidade indisponível para ${tipo.charAt(0).toUpperCase() + tipo.slice(1)}.`);
    } else {
        quantidadeAtual -= qtdIngresso;
        elemento.innerHTML = `<span id="qtd-${tipo}">${quantidadeAtual}</span>`;
        alert('Compra realizada com sucesso!');
    }
}

function comprar() {
    let tipo = document.getElementById('tipo-ingresso').value;
    let qtdIngresso = parseInt(document.getElementById('qtd').value);

    if (isNaN(qtdIngresso) || qtdIngresso <= 0) {
        alert('Por favor, insira uma quantidade válida.');
        return;
    }

    switch (tipo) {
        case 'pista':
            atualizarQuantidade('pista', qtdIngresso);
            break;
        case 'superior':
            atualizarQuantidade('superior', qtdIngresso);
            break;
        case 'inferior':
            atualizarQuantidade('inferior', qtdIngresso);
            break;
        default:
            alert('Lamentamos! Os ingressos esgotaram.');
            break;
    }
}

Limpando o campo "Escolha o tipo" ao carregar a página

Para limpar o campo "Escolha o tipo" quando a página é carregada, você pode usar o evento DOMContentLoaded para garantir que o código será executado após o carregamento completo do DOM. Adicione o seguinte script:

document.addEventListener('DOMContentLoaded', (event) => {
    document.getElementById('tipo-ingresso').value = '';
});

Código completo

Aqui está o código completo com as alterações:

let qtdPista = parseFloat(document.getElementById('qtd-pista').textContent);
let qtdSuperior = parseInt(document.getElementById('qtd-superior').textContent);
let qtdInferior = parseInt(document.getElementById('qtd-inferior').textContent);

function atualizarQuantidade(tipo, qtdIngresso) {
    let elemento = document.getElementById(`qtd-${tipo}`);
    let quantidadeAtual = parseInt(elemento.textContent);

    if (qtdIngresso > quantidadeAtual) {
        alert(`Quantidade indisponível para ${tipo.charAt(0).toUpperCase() + tipo.slice(1)}.`);
    } else {
        quantidadeAtual -= qtdIngresso;
        elemento.innerHTML = `<span id="qtd-${tipo}">${quantidadeAtual}</span>`;
        alert('Compra realizada com sucesso!');
    }
}

function comprar() {
    let tipo = document.getElementById('tipo-ingresso').value;
    let qtdIngresso = parseInt(document.getElementById('qtd').value);

    if (isNaN(qtdIngresso) || qtdIngresso <= 0) {
        alert('Por favor, insira uma quantidade válida.');
        return;
    }

    switch (tipo) {
        case 'pista':
            atualizarQuantidade('pista', qtdIngresso);
            break;
        case 'superior':
            atualizarQuantidade('superior', qtdIngresso);
            break;
        case 'inferior':
            atualizarQuantidade('inferior', qtdIngresso);
            break;
        default:
            alert('Lamentamos! Os ingressos esgotaram.');
            break;
    }
}

document.addEventListener('DOMContentLoaded', (event) => {
    document.getElementById('tipo-ingresso').value = '';
});

Testa e veja se funciona, se achar que faz sentido, aplique em seu código.

Espero ter ajudado e bons estudos!

por Manuelly Souza De Oliveira
| 27.9k xp | 11 posts

Muito obrigada pela ajuda Renan, suas dicas de compactação de código e o limpar campo inicial ajudaram muito. Além disso, já testei o código fornecido e ele funciona muito bem.