3
respostas

[Projeto] Minha Solução

let totalGeral;
limpar();

function adicionar() {
  //recuperar valores nome do produto, quantidade e valor.
  let produto = document.getElementById('produto').value;
  let nomeProduto = produto.split ('-')[0];
  let valorUnitario = produto.split('R$')[1];
  let quantidade = document.getElementById('quantidade').value;
  //calcular o preço, nosso subproduto
  let calcularSubtotal = (valorUnitario * quantidade);
  //adicionar esse produto no carrinho
  if (quantidade < 1) {
    alert ('A "Quantidade" do item selecionado deve ser no mínimo de 1 unidade.');
    return;
  } else {
    let listaCarrinho = document.getElementById('lista-produtos');
    listaCarrinho.innerHTML = listaCarrinho.innerHTML + `<section class="carrinho__produtos__produto">
    <span class="texto-azul">${quantidade}x</span>${nomeProduto}<span class="texto-azul">R$${calcularSubtotal}</span>
  </section>`;
    //atualizar o valor total
    totalGeral = totalGeral + calcularSubtotal;
    let campoTotal = document.getElementById('valor-total');
    campoTotal.textContent = `R$ ${totalGeral}`;
    //limpar a "quantidade" toda vez que o item for adicionado ao carrinho
    quantidade = document.getElementById('quantidade').value = 0;
  }
}

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

Essa foi minha conclusão do projeto, no entanto, percebi que ao adicionar algum produto com o campo da quantidade zerada, o item era adicionado no carrinho sem alterar o valor total de 0, então criei uma condicional que verifica a quantidade de produtos, se for menor que 1 aparecerá um alert e logo em seguida, o código retornará sem alterar nada.

Aceito sugestões e opiniões :)

3 respostas

Olá, como vai? Espero que esteja bem!

Fico feliz em ver que realizou a atividade, é isso aí! Continue se dedicando aos estudos e colocando em prática seus aprendizados.

Caso tenha dúvidas, fico à disposição.

Abraços e bons estudos!

Pior que eu não conhecia esse "produto.split ('-')[0]", dai precisei fazer uma função com parâmetro (item , preço) para funcionar.

Interessante ver como é possível chegar a soluções parecidas com códigos tão diferentes.

Meu código:

let seletor = document.querySelector(".carrinho__produtos");
let seletorOptions=document.getElementById("produto").options;
let valorTotal = 0.00;
let qtd;

limpar();

function adicionar() {
    qtd = parseInt(document.querySelector(".quantidade-input").value);
    if (isNaN(qtd) || qtd==0) {
        console.log('NaN ou zero');
    } else {
        if (seletor.textContent == "Nenhum produto adicionado!") {
            seletor.innerHTML = "";
        }

        if (seletorOptions[seletorOptions.selectedIndex]==seletorOptions[0]){
            calculaNovoAdd(" Fone de ouvido", 100);
        }else if(seletorOptions[seletorOptions.selectedIndex]==seletorOptions[1]){
            calculaNovoAdd(" Celular", 1400);
        }else if(seletorOptions[seletorOptions.selectedIndex]==seletorOptions[2]){
            calculaNovoAdd(" Oculos VR", 5000);
        }
    }
}
function calculaNovoAdd(item, preço) {
    // Calcula novo valor adicionado e soma ao valor total
    let valor = qtd * preço;
    
    seletor.insertAdjacentHTML("beforeend", `<section class="carrinho__produtos__produto"> <span class='texto-azul'> ${qtd}x </span> ${item} <span class='texto-azul'> R$${valor} </span> </section>`);
    valorTotal += valor;
    document.getElementById("valor-total").innerHTML = `R$${valorTotal.toLocaleString('pt-BR')}`;
}

function limpar() {
    seletor.innerHTML = "Nenhum produto adicionado!";
    document.getElementById("valor-total").innerHTML = "RS 0,00";
    valorTotal = 0;
    qtd = 0;
}

Legal! seu código tem várias estruturas que eu também desconheço, afinal, sou iniciante, mas irei estudar pra chegar no seu nível também ;)