Entrar Ainda não tem acesso?
1
resposta

desafio carrinho

Referente ao curso Lógica de programação: praticando com desafios, no capítulo Projeto Carrinho de Compras e atividade Calculando valor total do carrinho

por Rebeca De Assis Rodrigues
| 41.6k xp | 15 posts
limpar();

function adicionar() {
    // Capturar o valor do produto selecionado
    let produtoSelecionado = document.getElementById('produto').value;
    // Capturar a quantidade inserida
    let quantidade = document.getElementById('quantidade').value;

    // Separar o nome do produto e o valor do produto
    let partesProduto = produtoSelecionado.split(' - ');
    let nomeProduto = partesProduto[0]; // Nome do produto
    let valorProduto = partesProduto[1].replace('R$', ''); // Remover 'R$' e obter o valor numérico

    // Converter o valor do produto e quantidade para números
    let valorNumerico = parseFloat(valorProduto);
    let quantidadeNumerica = parseInt(quantidade);

    // Calcular o preço total para o produto adicionado
    let precoTotal = valorNumerico * quantidadeNumerica;

    // Selecionar a lista de produtos no carrinho
    let listaProdutos = document.getElementById('lista-produtos');

    //Criar um novo elemento para adicionar ao carrinho
    let novoProduto = document.createElement('section');
    novoProduto.classList.add('carrinho__produtos__produto');
    novoProduto.innerHTML = `<span class="texto-azul">${quantidadeNumerica}x</span> ${nomeProduto} <span class="texto-azul">R$ ${precoTotal.toFixed(2)}</span>`;

    //adicionar o novo produto à lista de produtos
    listaProdutos.appendChild(novoProduto);


    // Atualizar o valor total
    let valorTotalElemento = document.getElementById('valor-total');
    let valorTotalAtual = parseFloat(valorTotalElemento.textContent.replace('R$', '')); // Pegar o valor total atual
    let novoValorTotal = valorTotalAtual + precoTotal; // Somar o novo valor ao total atual

    // Exibir o novo valor total
    valorTotalElemento.textContent = `R$${novoValorTotal.toFixed(2)}`;
    document.getElementById('quantidade').value = 0;


}

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

Fiz dessa forma. Vi que ficou diferente do que foi apresentado pelos professores. Deu certo do mesmo jeito. Mas gostaria de saber qual a melhor forma para montar esse projeto? Qual normalmente as empresas pedem?

1 resposta
por Lorena Garcia
| 8289.7k xp | 12130 posts
Alura Scuba Team Suporte Educacional

Oi Rebeca!

Que legal que você conseguiu fazer o desafio funcionar! A sua abordagem está bem próxima da solução sugerida pelos professores, mas há algumas diferenças que podem ser ajustadas para seguir as boas práticas e o que normalmente é esperado em projetos de empresas.

  1. No exemplo dos professores, eles sugerem usar uma variável global totalGeral para acumular o valor total dos produtos. Isso ajuda a manter o estado do total fora da função adicionar, evitando que ele seja redefinido a cada chamada da função.

    let totalGeral = 0;

function adicionar() {
    // ...
    totalGeral += precoTotal;
    // ...
}

  2. : A função limpar que você criou já faz isso, mas é importante garantir que o carrinho e o total estejam zerados ao iniciar a aplicação. Isso pode ser feito chamando limpar() logo após a declaração das variáveis globais.

    let totalGeral = 0;
limpar();

  3. No seu código, você atualiza o valor total diretamente na função adicionar. Isso está correto, mas lembre-se de sempre usar toFixed(2) para garantir que o valor seja exibido com duas casas decimais.

  4. As empresas valorizam um código que seja fácil de ler e manter. Isso inclui comentários claros, boa indentação e nomes de variáveis que façam sentido.

Um abraço e bons estudos.