1
resposta

Código final com ajustes após exemplo do vídeo

Utilizei uma abordagem um pouco diferente utilizando o conceito de objeto para criar o meu carrinho. Aceito sugestões de melhoria.

Fiz o meu com a utilzação de funções de criação de elemento e adicionar classes para listar em tela os meus produtos.

let produtoSelect = document.getElementById("produto");
let quantidadeProdutoSelect = document.getElementById("quantidade");
let carrinho = document.getElementById("lista-produtos");
let valorTotal = document.getElementById("valor-total");
let listaValorTotal = [];
quantidadeProdutoSelect.value = "1";

function adicionar() {
  let produtosString = produtoSelect.value;
  let qtdProduto = quantidadeProdutoSelect.value
    ? quantidadeProdutoSelect.value
    : 1;
  let arrayDeStringDividida = produtosString.split("- R$");

  mostrarProdutosNaTela(criaProduto(arrayDeStringDividida, qtdProduto));
  alterarValorTotal(listaValorTotal);
}

function mostrarProdutosNaTela(dadosDoProduto) {
  let section = document.createElement("section");
  section.classList.add("carrinho__produtos__produto");

  let spanQuantidadeProduto = document.createElement("span");
  spanQuantidadeProduto.innerText = `${dadosDoProduto[0].quantidade}x `;
  spanQuantidadeProduto.classList.add("texto-azul");

  let spanProduto = document.createElement("span");
  spanProduto.innerText = dadosDoProduto[0].produto;

  let spanPrecoProduto = document.createElement("span");
  spanPrecoProduto.innerText = `R$${dadosDoProduto[0].preco}`;
  spanPrecoProduto.classList.add("texto-azul");

  section.appendChild(spanQuantidadeProduto);
  section.appendChild(spanProduto);
  section.appendChild(spanPrecoProduto);

  carrinho.appendChild(section);

  quantidadeProdutoSelect.value = "1";
}

function criaProduto(arrayDeStringDividida, qtdProduto) {
  let preco = parseInt(arrayDeStringDividida[1]);

  let dadosDoProduto = [
    {
      produto: arrayDeStringDividida[0],
      preco: preco,
      quantidade: parseInt(qtdProduto),
      total: qtdProduto * preco,
    },
  ];

  listaValorTotal.push(dadosDoProduto[0].total);
  console.log(listaValorTotal);

  return dadosDoProduto;
}

function alterarValorTotal(arrayValores) {
  let valorTotalDosProdutos = 0.0;
  arrayValores.forEach((valor) => {
    valorTotalDosProdutos += valor;
  });
  valorTotal.innerText = `${parseFloat(valorTotalDosProdutos).toLocaleString(
    "pt-bt",
    { style: "currency", currency: "BRL" }
  )}`;
}

function limpar() {
  carrinho.querySelectorAll(".carrinho__produtos__produto");
  carrinho.querySelectorAll(".carrinho__produtos__produto").forEach((item) => {
    item.remove();
  });
  valorTotal.innerText = "R$0,00";
  quantidadeProdutoSelect.value = "1";
}
1 resposta

Oi Roger,

Excelente iniciativa em usar objetos para organizar seu carrinho! 👍

Sua abordagem com funções para criar e adicionar elementos ao DOM é muito boa e deixa o código bem estruturado.

Uma sugestão para aprimorar seu código seria refatorar a função criaProduto. Em vez de retornar um array contendo um objeto, você poderia retornar diretamente o objeto. Isso simplificaria a lógica em mostrarProdutosNaTela e evitaria o acesso dadosDoProduto[0].

Outro ponto é que a função limpar está selecionando os elementos do carrinho duas vezes, o que é desnecessário. Você pode armazenar a seleção em uma variável e usar essa variável para remover os itens.

Veja um exemplo de como ficaria a função criaProduto e limpar:

function criaProduto(arrayDeStringDividida, qtdProduto) {
  let preco = parseInt(arrayDeStringDividida[1]);

  let dadosDoProduto = {
      produto: arrayDeStringDividida[0],
      preco: preco,
      quantidade: parseInt(qtdProduto),
      total: qtdProduto * preco,
    };

  listaValorTotal.push(dadosDoProduto.total);
  console.log(listaValorTotal);

  return dadosDoProduto;
}

function limpar() {
  const itensCarrinho = carrinho.querySelectorAll(".carrinho__produtos__produto");
  itensCarrinho.forEach((item) => {
    item.remove();
  });
  valorTotal.innerText = "R$0,00";
  quantidadeProdutoSelect.value = "1";
}

Essas pequenas mudanças podem tornar seu código ainda mais limpo e eficiente. 💪 Continue praticando e explorando novas abordagens! 🤔

Para saber mais: Manipulação do DOM - Documentação da MDN sobre como manipular o DOM com JavaScript.

A prática leva à perfeição! 💻