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}`;
});
}