1
resposta

Minha resolução da atividade do carrinho

let carrinho = [];

function adicionar() { // Recuperar valores nome do produto, quantidade e valor let produto = document.getElementById('produto').value; let nomeProduto = produto.split('-')[0].trim(); // Ajusta para tirar espaços extras let valorUnitario = parseFloat(produto.split('R$')[1].trim().replace(',', '.')); // Converte para número let quantidade = parseInt(document.getElementById('quantidade').value, 10); // Garante que a quantidade seja um inteiro

if (quantidade >= 1) {
    // Exibe informações no console
    console.log('Produto: ' + nomeProduto + ' - Valor Unitário: R$ ' + valorUnitario + ' - Quantidade: ' + quantidade);

    // Calcular o preço (subtotal)
    let subtotal = quantidade * valorUnitario;

    // Adicionar o subtotal ao carrinho
    carrinho.push({ nome: nomeProduto, subtotal: subtotal, quantidade: quantidade });
    console.log(carrinho);

    let listaProdutos = document.getElementById('lista-produtos');
    listaProdutos.innerHTML = ''; // Limpa a lista antes de adicionar novos itens

    carrinho.forEach(item => {
        let produtoHTML = `<section class="carrinho__produtos__produto">
                                <span class="texto-azul">${item.quantidade} x ${item.nome}</span> - 
                                <span class="texto-azul">R$ ${item.subtotal.toFixed(2)}</span>
                            </section>`;
        listaProdutos.innerHTML += produtoHTML;
    });

    // Atualizar o total do carrinho (somando os subtotais)
    let totalCarrinho = carrinho.reduce((acc, item) => acc + item.subtotal, 0); // Soma todos os subtotais

    // Exibir o total no HTML
    document.getElementById('valor-total').innerHTML = ' Total: R$' + totalCarrinho.toFixed(2);  // Exibe o total com 2 casas decimais
} else {
    alert("Por favor, insira uma quantidade válida!");
}

}

function limpar() { // Limpar o carrinho carrinho = []; // Limpar a lista de produtos e o total no HTML document.getElementById('lista-produtos').innerHTML = ''; document.getElementById('valor-total').innerHTML = ' Total: R$0.00'; }

// Basicamente, fiz tudo de forma mais complexa, e, após dois dias da conclusão, provavelmente vou esquecer metade do que fiz. �� É difícil fazer de forma mais direta, já que o VS oferece sugestões. Pesquisei bastante na internet e acabei fazendo uma confusão danada que nem o ChatGPT deve entender, com tantos caracteres para um código tão simples, haha. Meu aliado aqui tem sido o programa Obsidian, e acredito que seria uma boa sugestão para os novatos (como eu), pois não preciso ficar decorando tudo. Apenas faço anotações sem a necessidade de um caderno. Ele ainda tem um sistema de mapa mental que reúne os blocos de anotações...

1 resposta

Oii, Jean!

Obrigada por compartilhar sua solução do projeto Carrinho de Compras com a gente.

No começo é assim mesmo, e é bom que você tá praticando e vendo diferentes formas de fazer.

Gostei de como você estruturou o cálculo do subtotal e implementou a exibição dinâmica dos itens no HTML. O uso do reduce para calcular o total do carrinho foi uma escolha excelente!

Conte com o apoio do Fórum na sua jornada. Abraços e bons estudos!