Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Projeto] Minha resolução do desafio do Ingresso Online

Oi pessoal!

Deixo aqui minha resolução do desafio proposto do Ingresso Online que fiz antes de prosseguir os estudos com a resolução das aulas. Ao que tudo indica deu certo aqui, mas se houver alguma melhoria ou boas práticas a implementar, agradeço feedback!

function comprar (){
    //Resgatar valores
    let tipoIngresso = document.getElementById('tipo-ingresso').value;
    let quantidade = document.getElementById ('qtd').value;
    let quantidadeDisponivel = document.getElementById(`qtd-${tipoIngresso}`);
        
    //Decrementar quantidade disponível
    if(quantidade <= 0){
        alert('Insira uma quantidade de ingressos válida.');
        return;
    }
    
    let calculoQuantidade = quantidadeDisponivel.textContent-quantidade;
    
    if (calculoQuantidade < 0) {
        alert('Quantidade solicitada indisponível.')
        return;
    }else{
       quantidadeDisponivel.innerHTML = `${calculoQuantidade}`;
       alert('Compra efetuada com sucesso!');
    }

}
2 respostas

Após finalizar a aula, percebi que simplifiquei bastante. Por não haver condicionais para cada tipo de ingresso, acabei por tratá-los todos da mesma forma e por isso não utilizei funções separadas. O que acredito não estar errado, já que meu código atende às condições do desafio.

Dito isso, melhorei o código com as resoluções da aula e com reforço da Luri.

Apliquei parseInt para garantir que os valores obtidos de quantidades sejam números inteiros. Como em:

let quantidade = parseInt(document.getElementById ('qtd').value);

e

let calculoQuantidade = parseInt(quantidadeDisponivel.textContent) - quantidade;

Além disso por sugestão da Luri, implementei uma verificação para que o campo 'Quantidade' seja número inteiro, não negativo e diferente de zero.

if(quantidade <= 0 || isNaN(quantidade)){
        alert('Insira uma quantidade de ingressos válida.');
        return;
    }

Com isso fica aqui o código completo pós-aula:

function comprar (){
    //Resgatar valores
    let tipoIngresso = document.getElementById('tipo-ingresso').value;
    let quantidade = parseInt(document.getElementById ('qtd').value);
    let quantidadeDisponivel = document.getElementById(`qtd-${tipoIngresso}`);
        
    //Checa se o campo quantidade é negativo ou igual a zero ou se é um número inteiro
    if(quantidade <= 0 || isNaN(quantidade)){
        alert('Insira uma quantidade de ingressos válida.');
        return;
    }
    
    //Decrementar quantidade disponível
    let calculoQuantidade = parseInt(quantidadeDisponivel.textContent) - quantidade;
    
    if (calculoQuantidade < 0) {
        alert('Quantidade solicitada indisponível.')
        return;
    }else{
       quantidadeDisponivel.innerHTML = `${calculoQuantidade}`;
       alert('Compra efetuada com sucesso!');
    }

}
solução!

Oi, Jean! Como vai?

Agradeço por compartilhar.

Sua resolução ficou muito boa e sua ideia de tratar os tipos de ingresso de forma dinâmica com qtd-${tipoIngresso} faz bastante sentido, porque evita repetir condicionais para cada categoria. Também foi uma boa melhoria usar parseInt e validar a quantidade com isNaN, garantindo que o cálculo seja feito com números válidos.

Dica: você pode usar textContent também na hora de atualizar a quantidade disponível, assim mantém o código mais direto para alterar apenas texto: quantidadeDisponivel.textContent = calculoQuantidade;. Continue testando variações de entrada, como campo vazio, zero e valores maiores que o disponível, pois isso ajuda a deixar a solução mais segura.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!