Utilizando a IA para corrigir alguns erros e aprender novos códigos eu cheguei a esse resultado:
limpar();
const valorProdutos = {
"Fone de ouvido": 100,
"Celular": 1400,
"Oculus VR": 5000,
"Smart watch": 800
};
function adicionar() {
let produto = document.querySelector('#produto');
let nomeProduto = produto.value.split(' - ')[0]; // Pega só o nome do produto
let quantidade = parseInt(document.querySelector('.quantidade-input').value);
if (!produto.value || isNaN(quantidade) || quantidade <= 0) {
alert('Por favor, selecione um produto e/ou insira uma quantidade válida.');
return;
}
// Pegar o valor do produto usando o objeto valorProdutos
let valor = valorProdutos[nomeProduto];
let valorTotal = valor * quantidade;
let adcProduto = document.querySelector('#lista-produtos');
let novoItem = document.createElement('section');
novoItem.classList.add('carrinho__produtos__produto');
novoItem.innerHTML = `<span class="texto-azul">${quantidade}x</span> ${nomeProduto} <span class="texto-azul">R$${valorTotal}</span>`;
adcProduto.appendChild(novoItem);
// Atualizar o valor total do carrinho
let valorCarrinhoAtual = parseInt(document.querySelector('.carrinho__total .texto-azul').textContent.split('R$')[1]) || 0;
let novoValorCarrinho = valorCarrinhoAtual + valorTotal;
document.querySelector('.carrinho__total').innerHTML = `Total: <span class="texto-azul">R$${novoValorCarrinho}</span>`;
document.querySelector('.quantidade-input').value = '';
document.querySelector('.produto-input').value = '';
}
function limpar() {
let limparCarrinho = document.querySelector('#lista-produtos');
limparCarrinho.innerHTML = '';
document.querySelector('.carrinho__total').innerHTML = 'Total: <span class="texto-azul">R$0</span>';
let produtoInput = document.querySelector('.produto-input');
if (produtoInput) {
produtoInput.value = '';
}
let qtdInput = document.querySelector('.quantidade-input');
if (qtdInput) {
qtdInput.value = '';
}
}
P.S.: O "Smart Watch" eu adicionei a lista de produtos como teste pessoal de uso do index.html.