Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Praticando com Desafios

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.

Matricule-se agora e aproveite até 50% OFF

O maior desconto do ano para você evoluir com a maior escola de tecnologia

QUERO APROVEITAR
1 resposta
solução!

Oi, Kevin! Como vai?

Agradeço por compartilhar.

Gostei do seu código, está bem estruturado e mostra que você entendeu como manipular o DOM e atualizar o carrinho de forma dinâmica. É interessante ver que você incluiu um produto novo para testar o funcionamento, isso mostra autonomia na prática.

Continue explorando e testando diferentes cenários.

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