Apresentação do projeto Carrinho de Compras | Lógica de programação: praticando com desafios

app.js

let precoTotal = parseInt(separarDados(document.getElementById('valor-total').textContent, 'R$').filter((a,b) => b == 1));

function adicionar()
{                
    let sectionNode = adicionarClasse('carrinho__produtos__produto', document.createElement('section')); 
    let listaSpanNode = [adicionarClasse('texto-azul', document.createElement('span')), adicionarClasse('texto-azul', document.createElement('span'))];
    let listaTextNode = obterDadosDoProduto();
    if (listaTextNode[0] < 1)
    {
        return;
    }
    precoTotal = precoTotal + parseInt(listaTextNode[2]) * parseInt(listaTextNode[0]);
    adicionarElemento(sectionNode, adicionarElemento(listaSpanNode[0], listaTextNode[0] + 'x '));
    adicionarElemento(sectionNode, listaTextNode[1]);
    adicionarElemento(sectionNode, adicionarElemento(listaSpanNode[1], ' R$' + listaTextNode[2]));
    adicionarElemento(document.getElementById('lista-produtos'), sectionNode);
    document.getElementById('valor-total').textContent = 'R$' + precoTotal;
}

function limpar()
{    
    removerFilhos();
    document.getElementById('valor-total').textContent = 'R$' + (precoTotal = 0);
}

function separarDados(texto, separador)
{
    return texto.split(separador);
}

function obterDadosDoProduto()
{
    let listaDadosDoProduto = [document.getElementById('quantidade').value];
    for (const valor of separarDados(document.getElementById('produto').value, ' - R$').values())
    {
        listaDadosDoProduto.push(valor);
    }
    return listaDadosDoProduto;
}

function adicionarClasse(classe,elemento)
{
    elemento.classList.add(classe);    
    return elemento;
}

function adicionarElemento(elementoPai,elementoFilho)
{
    elementoPai.append(elementoFilho);
    return elementoPai;
}

function removerFilhos()
{
    for (const filho of document.querySelectorAll('.carrinho__produtos__produto'))
    {
        document.getElementById('lista-produtos').removeChild(filho);
    }
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&family=Inter:wght@400;600;700&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="style.css">

  <title>Carrinho de compras</title>
</head>

<body>
  <main class="conteudo-principal">
    <div class="grafismo-azul"></div>
    <section class="adicionar-produto">
      <h1 class="titulo">
        Carrinho de <span class="texto-azul">compras</span>
      </h1>

      <form class="formulario">
        <label class="campo-grupo">
          <span class="texto-medio-azul">Produto</span>
          <select class="produto-input" name="produto" id="produto">
            <option value="Fone de ouvido - R$100">Fone de ouvido - R$100</option>
            <option value="Celular - R$1400">Celular - R$1400</option>
            <option value="Oculus VR - R$5000">Oculus VR - R$5000</option>
          </select>
          </div>
        </label>

        <section class="parte-inferior">
          <label class="campo-grupo">
            <span class="texto-medio-azul">Qtde.</span>
            <input class="quantidade-input" id="quantidade" type="number" placeholder="100">
          </label>

          <section class="botoes-wrapper">
            <button onclick="adicionar()" type="button" class="botao-form botao-adicionar">Adicionar</button>
            <button onclick="limpar()" type="button" class="botao-form botao-limpar">Limpar</button>
          </section>
        </section>
      </form>
    </section>
    <section class="carrinho">
      <img src="./assets/carrinho-cinza.svg" alt="Imagem de um carrinho de compras cinza">

      <div class="titulo-wrapper">
        <img src="./assets/icone-carrinho.svg" alt="ícone de carrinho">

        <h2 class="carrinho__titulo">Produtos no carrinho</h2>
      </div>

      <section class="carrinho__produtos" id="lista-produtos">
        <section class="carrinho__produtos__produto">
          <span class="texto-azul">1x</span> Celular <span class="texto-azul">R$1400</span>
        </section>
      </section>

      <div class="divisoria"></div>

      <p class="carrinho__total">
        Total: <span class="texto-azul" id="valor-total">R$1400</span>
      </p>
    </section>
  </main>

  <script src="js/app.js"></script>
</body>

</html>

Mergulhe em programação