2
respostas

[Projeto] Melhoria no código do Carrinho de Compras.

por Rafael Xavier de Farias
| 83.8k xp | 140 posts

O código ele atualiza a quantidade de cada produto, assim tendo somente 3 mensagens, exemplo: adicionei um celular, e depois adicionei outro celular. O código vai juntar a quantidade dos dois aparecendo na tela a quantidade que o celular foi adicionado. O mesmo pros demais

var total = 0;
var qFone = 0;
var qCelular = 0;
var qOculus = 0;
var produto;

function adicionar() {
    // Pegar os valores nome do produto, quantidade e valor
    produto = document.getElementById('produto').value;
    produto = produto.split(' - R$');
    var valor = produto[1];
    produto = produto[0];
    let quantidade = document.getElementById('quantidade').value;

    // Adiciona a quantidade dos produtos
    if (valor == 100) {
        qFone += parseInt(quantidade);
    } else if (valor == 1400) {
        qCelular += parseInt(quantidade)
    } else {
        qOculus += parseInt(quantidade)
    }

    // Verificar se a quantidade é aceita
    if (quantidade == '' || quantidade == 0) {
        apagarQuantidade();
        alert('Favor, digite uma quantidade.');
        return;
    }
    
    // Adicionar o produto no carrinho
    displayCarrinho()
    
    // Atualizar o valor total da compra
    apagarQuantidade();
    total += valor * parseInt(quantidade);
    displayTotal();
    
}

function limpar() {
    let carrinho = document.getElementById('lista-produtos'); 
    carrinho.innerHTML = '<section class="carrinho__produtos" id="lista-produtos"></section>'
    total = 0
    qFone = 0;
    qCelular = 0;
    qOculus = 0;
    displayTotal();
}

function apagarQuantidade() {
    let quantidade = document.getElementById('quantidade');
    quantidade.value = '';
}

function displayTotal() {
    let displayTotal = document.getElementById('valor-total')
    displayTotal.innerHTML = `R$${total}`
}

function displayCarrinho() {
    let carrinho = document.getElementById('lista-produtos'); 
    carrinho.innerHTML = '<section class="carrinho__produtos" id="lista-produtos"></section>'

    if (qFone >= 1) {
        carrinho.innerHTML = carrinho.innerHTML + `<section class="carrinho__produtos__produto">
        <span class="texto-azul">${parseInt(qFone)}x</span> Fone de ouvido <span class="texto-azul">R$100<br></span>
        </section>`
    } if (qCelular >= 1) {
        carrinho.innerHTML = carrinho.innerHTML + `<section class="carrinho__produtos__produto">
        <span class="texto-azul">${parseInt(qCelular)}x</span> Celular <span class="texto-azul">R$1400<br></span>
        </section>`
    } if (qOculus >= 1) {
        carrinho.innerHTML = carrinho.innerHTML + `<section class="carrinho__produtos__produto">
        <span class="texto-azul">${parseInt(qOculus)}x</span> Oculus VR <span class="texto-azul">R$5000<br></span>
        </section>`
    }
}
2 respostas
por Renan Lima
| 4241.6k xp | 9015 posts

Olá, Rafael,.

Como vai?

Parece que você só está compartilhando a melhoria que você fez no código, não há nenhuma dúvida, certo? Se sim, muito obrigado por compartilhar aqui com agente. Isso mostra que você está de fato praticando e evoluindo. 

Ficou ótima essa melhoria. Parabéns :)

Se precisar de ajuda, manda aqui. Bons estudos!

por Alisson Fernando berçalini
| 53.7k xp | 89 posts

opa, se quiser melhorar ainda mais, e manter o codigo mais limpo...

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Estilos CSS aqui */
  </style>
</head>
<body>
  <select id="produto">
    <option value="Fone de ouvido - R$100">Fone de ouvido</option>
    <option value="Celular - R$1400">Celular</option>
    <option value="Oculus VR - R$5000">Oculus VR</option>
  </select>
  <input type="number" id="quantidade" placeholder="Quantidade">
  <button onclick="adicionar()">Adicionar</button>
  <button onclick="limpar()">Limpar</button>
  <div id="lista-produtos"></div>
  <div id="valor-total">R$0</div>

  <script>
    const carrinho = {
      produtos: {
        "Fone de ouvido": { preco: 100, quantidade: 0 },
        "Celular": { preco: 1400, quantidade: 0 },
        "Oculus VR": { preco: 5000, quantidade: 0 },
      },
      total: 0,
    };

    function adicionar() {
      const produtoSelect = document.getElementById('produto');
      const quantidadeInput = document.getElementById('quantidade');
      const produtoSelecionado = produtoSelect.value.split(' - R$');
      const produtoNome = produtoSelecionado[0];
      const produtoPreco = parseFloat(produtoSelecionado[1]);
      const quantidade = parseInt(quantidadeInput.value);

      if (isNaN(quantidade) || quantidade <= 0) {
        alert('Favor, digite uma quantidade válida.');
        return;
      }

      carrinho.produtos[produtoNome].quantidade += quantidade;
      carrinho.total += produtoPreco * quantidade;

      atualizarCarrinho();
      atualizarTotal();
    }

    function limpar() {
      for (const produto in carrinho.produtos) {
        carrinho.produtos[produto].quantidade = 0;
      }
      carrinho.total = 0;
      atualizarCarrinho();
      atualizarTotal();
    }

    function atualizarCarrinho() {
      const listaProdutos = document.getElementById('lista-produtos');
      listaProdutos.innerHTML = '';

      for (const produto in carrinho.produtos) {
        if (carrinho.produtos[produto].quantidade > 0) {
          const preco = carrinho.produtos[produto].preco;
          listaProdutos.innerHTML += `<div>${carrinho.produtos[produto].quantidade}x ${produto} R$${preco * carrinho.produtos[produto].quantidade}</div>`;
        }
      }
    }

    function atualizarTotal() {
      const valorTotal = document.getElementById('valor-total');
      valorTotal.textContent = `R$${carrinho.total}`;
    }
  </script>
</body>
</html>