1
resposta

Solução Carrinho de compra

let total = 0;
const listaProdutos = document.getElementById("lista-produtos");
const valorTotal = document.getElementById("valor-total");
const quantidadeInput = document.getElementById("quantidade");
const botaoLimpar = document.querySelector(".botao-limpar");
const botaoAdicionar = document.querySelector(".botao-adicionar");

// Armazena os produtos no carrinho
const carrinho = {};

// Inicializa a página
window.onload = () => {
  limparCampos();
  atualizarBotaoLimpar();
  atualizarBotaoAdicionar();
};

// Habilita ou desabilita o botão adicionar conforme a quantidade
quantidadeInput.addEventListener("input", atualizarBotaoAdicionar);

function adicionar() {
  const produtoSelect = document.getElementById("produto");
  const produto = produtoSelect.value;
  const quantidade = parseInt(quantidadeInput.value);

  if (!quantidade || quantidade <= 0) {
    alert("Informe uma quantidade válida.");
    return;
  }

  const [nome, precoTexto] = produto.split(" - R$");
  const preco = parseFloat(precoTexto);

  if (carrinho[nome]) {
    carrinho[nome].quantidade += quantidade;
  } else {
    carrinho[nome] = { preco: preco, quantidade: quantidade };
  }

  atualizarCarrinho();
  limparCampos();
  atualizarBotaoLimpar();
  atualizarBotaoAdicionar();
}

function atualizarCarrinho() {
  listaProdutos.innerHTML = "";
  total = 0;

  for (const nome in carrinho) {
    const item = carrinho[nome];
    const subtotal = item.preco * item.quantidade;
    total += subtotal;

    const produtoElemento = document.createElement("section");
    produtoElemento.classList.add("carrinho__produtos__produto");
    produtoElemento.innerHTML = `<span class="texto-azul">${item.quantidade}x</span> ${nome} <span class="texto-azul">R$${subtotal}</span>`;
    
    listaProdutos.appendChild(produtoElemento);
  }

  valorTotal.textContent = `R$${total}`;
}

function limpar() {
  for (const key in carrinho) delete carrinho[key];
  atualizarCarrinho();
  limparCampos();
  atualizarBotaoLimpar();
  atualizarBotaoAdicionar();
}

function limparCampos() {
  quantidadeInput.value = 0;
}

function atualizarBotaoLimpar() {
  botaoLimpar.disabled = Object.keys(carrinho).length === 0;
}

function atualizarBotaoAdicionar() {
  const quantidade = parseInt(quantidadeInput.value);
  botaoAdicionar.disabled = !quantidade || quantidade <= 0;
}

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
1 resposta

Olá, Paulo! Como vai?

Parabéns pela resolução da atividade!

Observei que você explorou o uso de objetos para estruturar o carrinho de compras, utilizou muito bem o manipulador de eventos para controlar a interação do usuário com os botões e ainda compreendeu a importância do DOM dinâmico para atualizar a interface conforme os dados inseridos.

Permaneça postando as suas soluções, com certeza isso ajudará outros estudantes e tem grande relevância para o fórum.

Fico à disposição! E se precisar, conte sempre com o apoio do fórum.

Abraço e bons estudos!

AluraConte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!