1
resposta

[Projeto] minha solução.

let produtos = document.getElementById('produto');
let fone = produtos[0].textContent;
let celular = produtos[1].textContent;
let oculosVR = produtos[2].textContent;
let quantidadeDeProdutos = document.getElementById('quantidade');
let valorTotal = document.getElementById('valor-total');
let noCarrinho = document.getElementById('lista-produtos');


function nomeDoProduto(item) {
  nome = item.split("R$");
  return (nome[0]);
}

function valor (item) {
  return item.split("$")[1];
}

function somaValor (item) {
  resultado = valor(item) * quantidadeDeProdutos.value;
  return resultado;

}

function total(item) {
  calculo = parseFloat(valorTotal.textContent.slice(2)) + somaValor(item);
  return calculo;
}

function acrecimoNoCarrinho (item){
  return `<section class="carrinho__produtos__produto"><span class="texto-azul">${quantidadeDeProdutos.value}x</span> ${nomeDoProduto(item)} <span class="texto-azul">R$${somaValor(item)}</span></section>`;
}

function adicionar() {
  if (quantidadeDeProdutos.value >= 1){
    if (produtos.value == fone) {
      noCarrinho.innerHTML += acrecimoNoCarrinho(fone);
      valorTotal.innerHTML = `R$${total(fone)}`;
    } else {
      if (produtos.value == celular) {
        noCarrinho.innerHTML += acrecimoNoCarrinho(celular);
        valorTotal.innerHTML = `R$${total(celular)}`;
        }else {
          noCarrinho.innerHTML += acrecimoNoCarrinho(oculosVR);
          valorTotal.innerHTML = `R$${total(oculosVR)}`;
      }
    }
    quantidadeDeProdutos.value = "";
  }
}

function limpar(){
  quantidadeDeProdutos.value = "";
  noCarrinho.innerHTML = "";
  valorTotal.innerHTML = "R$0";
}

Fiz antes de ver a aula, então não sabia para que aquele "value" no HTML serviria. Então, fiz a captura com textContent. Acabei declarando as variáveis fora da função "adicionar()", o que me obrigou a separar todos os elementos. Depois que vi a solução, percebi que é muito mais prático pegar o elemento dentro da função, pois em caso de uma atualização dos produtos, a função faria a captura do produto sem precisar alterar o add.js. mesmo com esses porem, resolvir colocar aqui essa solução. Afinal, não se pode negar que, para o que foi proposto, essa solução funcionou, mas com certeza, uma atualização aqui seria trabalhosa. Acredito que ver o errado às vezes nos faz entender o certo. Caso alguém não tenha entendido de fato o porquê de declarar as variáveis dentro da função, aqui está um bom exemplo.

1 resposta

Oi, Alef! Tudo bem?

Muito obrigada por dividir essa experiência com a nossa comunidade do fórum, a sua participação ativa é muito importante para nós e torna a troca de conhecimento dentro da comunidade cada vez mais rica! Caso tenha ficado alguma dúvida, sinta-se à vontade em comunicar, estou à disposição!

Um forte abraço e bons estudos!