2
respostas

[Projeto] Resolução - Finalizando a compra e limpando o carrinho

let totalGeral;

limpar();

function adicionar() {
    // recuperar valores: nome produto, valor e quantidade
    let produtoSelecionado = document.getElementById('produto').value;
    let nomeProduto = produtoSelecionado.split('-')[0];
    let valorUnit = produtoSelecionado.split('R$') [1];
    let quantidade = document.getElementById('quantidade').value;

    // calcular preço (subtotal)
    let preco = quantidade * valorUnit;

    // adicionar no carrinho
    let carrinho = document.getElementById ('lista-produtos');
    carrinho.innerHTML = carrinho.innerHTML + `
        <section class="carrinho__produtos__produto">
          <span class="texto-azul">${quantidade}</span> ${nomeProduto} <span class="texto-azul">R$${preco}</span>
        </section>
    `;

    // atualizar o total geral
    totalGeral = totalGeral + preco;
    let campoTotal = document.getElementById('valor-total');
    campoTotal.textContent = `R$${totalGeral}`;
    document.getElementById('quantidade').value = 0;

}

function limpar() {
    totalGeral = 0;
    document.getElementById ('lista-produtos').innerHTML = '';
    document.getElementById('valor-total').textContent = 'R$ 0';

}

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
2 respostas

Olá Aline.
Seus códigos estão muito bons.
Realmente faceis de entender e com a estrutura bem organizada.
Continue praticando e compartilhando sua evolução!
Apenas uma sugestão :
É sempre uma boa prática inicializar variáveis com um valor padrão, especialmente quando o valor vai ser alterado mais tarde no código.
Isso ajuda a evitar comportamentos inesperados, especialmente em linguagens que não fazem verificação de tipo em tempo de compilação, como o JavaScript.
Mesmo o javascript sendo uma linguagem dinamica, uma variavel sem valor definido pode acabar com valor "undefined" e causar bugs.
No caso do totalGeral, se sabemos que ele vai armazenar um número, inicializá-lo com 0 faz sentido.
Isso impede que o valor da variável seja undefined e evita comportamentos estranhos em operações que você realizar com ela, como somas, que, se feita com undefined, poderia resultar em NaN (Not a Number). Exemplo:

let totalGeral = 0; // Inicializando com zero
totalGeral += 10; // Agora totalGeral é 10

Isso torna o código mais previsível e evita a necessidade de fazer checagens para ver se a variável está inicializada corretamente.
Como disse acima é apenas uma sugestão de melhoria.
Cada dia aprendemos um pouquinho.
Bons estudos e comente ai qualquer duvida.

Seu código está muito bem feito! Você estruturou de forma clara as funções de adicionar produtos ao carrinho, calcular o total e limpar o carrinho, o que mostra que você está entendendo bem os conceitos de manipulação de DOM e lógica de programação.

Gostei bastante da forma como você separou as responsabilidades em funções (adicionar e limpar), isso ajuda muito na organização e reutilização do código.

A lógica de cálculo do subtotal e atualização do total geral está funcionando direitinho!
Uma sugestão que eu faria seria garantir que o valor unitário seja convertido para número antes da multiplicação, usando parseFloat(valorUnit), só para evitar qualquer problema com strings:

let preco = quantidade * parseFloat(valorUnit);

Além disso, você poderia adicionar uma verificação para impedir que o usuário adicione produtos com quantidade zero ou negativa, o que deixaria o sistema mais robusto.
Parabéns pelo seu progresso!