1
resposta

projeto completo do carrinho de compras

Fui pesquisando aprendendo novas funcionalidades e aplicando ao projeto. acredito que tenha alguma forma de deixa-lo mais enxuto, mas isso vou deixar para aprender no decorrer do curso.

let carrinho = []; //inicia um array em branco
let total = 0; 

//função chamada pelo html para adicionar produto
function adicionar()
{
    let quantidade = document.getElementById("quantidade"); //captura o input de quantidade
    let quantidadeProdutos = parseInt(quantidade.value); //adiciona o valor forçando ser um numero inteiro
    let opcao = document.getElementById("produto"); //captura o campo de selecionar o produto
    let produto = opcao.value; //adiciona o valor do campo a variavel
    let valor = Number(produto.replace(/\D/g, "")); // retira apenas o valor numerico do campo para usa-lo como valor


    if (produto ==="" )
    {// verifica se o campo produto foi selecionado
        alert("Informe o Produto");
        return;
    }
    else if (quantidadeProdutos <= 0 || isNaN(quantidadeProdutos))
        {//verifica se o campo quantidade foi preechido
        alert("Informe a Quantidade");
        return;
    }//chama a função para colocar o produto no carrinho
        colocarProdutoNoCarrinho(produto,quantidadeProdutos,valor);
        limpacampo();//chama a função para limpar os campos para escolherem outro produto

}

function limpacampo()
{//limpa apenas os campos quantidade e produto
    let quantidade = document.getElementById("quantidade");
    quantidade.value = ""; 
    let produto = document.getElementById("produto");
    produto.value= "";
   
}
//função chamada pelo botão limpar no html
function limparTudo()
{ //limpa todos os campos selecionados e tudo que estava no carrinho
    limpacampo();
    let lista = document.getElementById("lista-produtos");
    lista.innerHTML = "";
    let spanTotal = document.getElementById("valor-total");
    spanTotal.textContent  = "R$0";
    carrinho = [];
    total = 0;
}

// insere os produtos no carrinho já separando os valores, quantidade e o produto
function colocarProdutoNoCarrinho(novoProduto,quantidade,valor)
{//procura dentro do carrinho para saber se o produto já está no carrinho
        let produtoExistente = carrinho.find(produto => produto.nome === novoProduto);
        
        if (produtoExistente)
            {// se o produto já existir vai exibir um alerta perguntando se é para somar a quantidade selecionada
                let confirmar = confirm(`${novoProduto} já está no carrinho, Deseja adicionar mais essa ${quantidade}?`);
            if (confirmar)
            {// se confirmado soma a nova quantidade a quantidade já existente
                produtoExistente.quantidade += quantidade;
            }
            }
        else
        {//se o produto não existir adiciona ao array o novo produto
            carrinho.push
            ({
                nome:novoProduto,
                quantidade:quantidade,
                valor:valor
            });
        }
        
        atualizarCarrinho();
}
//atualiza a lista apresentada no carrinho
function atualizarCarrinho()
{
    let lista = document.getElementById("lista-produtos");
    lista.innerHTML = "";

    //percorre todo o aray carrinho
    carrinho.forEach(produto =>
    {//cria o elemento span
        let item = document.createElement("span");
        item.style.display ="block";
//coloca no elemento span os itens seus valores e a quantidade dentro do array
        item.textContent = `${produto.quantidade}x ${produto.nome} - R$${produto.quantidade*produto.valor}`;
        lista.appendChild(item);
        //chama a função para calcular o valor total das compras
        calcularTotal();
    });
    
}

function calcularTotal()
{
    total = 0;

    let spanTotal = document.getElementById("valor-total");
    //percorre todo o array multiplicando seus vaores pela quantidade
    carrinho.forEach(produto => 
        {
       total += produto.quantidade*produto.valor;
       //apresenta o valor total no span em html
       spanTotal.textContent = `R$${total}`;
    });

}
1 resposta

Oi, Eduardo! Como vai?

Chamou atenção a forma como você organizou o carrinho usando um array de objetos e separou bem as responsabilidades em funções como adicionar, limparTudo e atualizarCarrinho, o que deixa o projeto mais fácil de entender e manter.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abracos e bons estudos!