4
respostas

[Sugestão] Sugestão de solução

Sugestão de solução:

let listaDeProdutos = document.getElementById('lista-produtos');
let valorTotal = 1400;

function limpar(){
    listaDeProdutos.innerHTML = '';
    document.getElementById('valor-total').innerText = 'R$0';
    valorTotal = 0;
}

function separarNomeEPreco(textoDoItem) {
    // Usamos split() para dividir a string no delimitador " - R\$"
    let partes = textoDoItem.split(' - R$');
    // Agora, 'partes' será um array: ["Fone de ouvido", "100"]

    let nomeDoItem = partes[0].trim(); // Pega a primeira parte e remove espaços em branco extras
    let precoString = partes[1].trim(); // Pega a segunda parte e remove espaços em branco extras

    // O preço ainda é uma string, precisamos convertê-lo para um número para cálculos
    let precoNumerico = parseFloat(precoString);

    return{
        nome: nomeDoItem,
        preco: precoNumerico
    };
}


function adicionar(){

    let produtoSelecionado = document.getElementById('produto').value;
    console.log(document.getElementById('produto').value);

    let informacoes = separarNomeEPreco(produtoSelecionado);
    console.log(informacoes);

    let quantidade = parseInt(document.getElementById('quantidade').value);
    if (isNaN(quantidade)){
        quantidade = 1;
    }
    console.log(quantidade);

    console.log(valorTotal);

    valorTotal += (quantidade * informacoes.preco);
    
    let novoProdutoElemento = document.createElement('section');
    novoProdutoElemento.classList.add('carrinho__produtos__produto');
    novoProdutoElemento.innerHTML = `<span class="texto-azul">${quantidade}x</span> ${informacoes.nome} <span class="texto-azul">R\$${informacoes.preco}</span>`;
    listaDeProdutos.appendChild(novoProdutoElemento); // Transforma o elemento em filho

    document.getElementById('valor-total').innerText = `R$${valorTotal}`;
}
4 respostas

Olá Pietro!
Acho que seu código está muito bom e bem organizado! Gostei de como você separou a lógica de extrair nome e preço em uma função específica (separarNomeEPreco). Isso deixa o código modular e fácil de manter.
Algumas sugestões para deixar o código ainda melhor.
1 - Formatar o valor total com duas casas decimais para exibição:

document.getElementById('valor-total').innerText = `R$${valorTotal.toFixed(2)}`;

2 - Tratar a quantidade mínima (não deixar ser zero ou negativa):

if (isNaN(quantidade) || quantidade < 1){
    quantidade = 1;
}

3 - Evitar repetição de document.getElementById pegando o mesmo elemento várias vezes. Você pode armazenar em variáveis:

let produtoSelect = document.getElementById('produto');
let quantidadeInput = document.getElementById('quantidade');
let valorTotalElemento = document.getElementById('valor-total');

Código com pequenas melhorias incorporadas:

let listaDeProdutos = document.getElementById('lista-produtos');
let valorTotal = 1400;
let valorTotalElemento = document.getElementById('valor-total');

function limpar() {
    listaDeProdutos.innerHTML = '';
    valorTotal = 0;
    valorTotalElemento.innerText = 'R$0.00';
}

function separarNomeEPreco(textoDoItem) {
    let partes = textoDoItem.split(' - R$');
    let nomeDoItem = partes[0].trim();
    let precoNumerico = parseFloat(partes[1].trim());
    return {
        nome: nomeDoItem,
        preco: precoNumerico
    };
}

function adicionar() {
    let produtoSelecionado = document.getElementById('produto').value;
    let informacoes = separarNomeEPreco(produtoSelecionado);

    let quantidade = parseInt(document.getElementById('quantidade').value);
    if (isNaN(quantidade) || quantidade < 1) {
        quantidade = 1;
    }

    valorTotal += quantidade * informacoes.preco;

    let novoProdutoElemento = document.createElement('section');
    novoProdutoElemento.classList.add('carrinho__produtos__produto');
    novoProdutoElemento.innerHTML = `<span class="texto-azul">${quantidade}x</span> ${informacoes.nome} <span class="texto-azul">R$${informacoes.preco.toFixed(2)}</span>`;
    listaDeProdutos.appendChild(novoProdutoElemento);

    valorTotalElemento.innerText = `R$${valorTotal.toFixed(2)}`;
}

@karina, muito obrigado pelas sugestões. Estudando um pouco mais voltei para corrigir a questão da quantidade rsrs e vi que você me deu uma sugestão.

Obg pelo feedback.

De nada, Pietro, bons estudos!