[Projeto] Projeto Carrinho de Compras - Hora da prática (Parte 1) | Lógica de programação: praticando com desafios

Adicione validações no código para garantir que o usuário só consiga adicionar produtos ao carrinho se tiver selecionado um produto válido e inserido uma quantidade válida. Se a entrada não for válida, exiba uma mensagem de erro apropriada.

let totalGeral;

limpar();

function adicionar() {
    // recuperar valores: nome produto, valor e quantidade
    let produtoSelecionado = document.getElementById('produto').value;
    let quantidade = document.getElementById('quantidade').value;

    if (!produtoSelecionado || produtoSelecionado.trim() === '') {
        alert('Por favor, selecione um produto.');
        return;
    }
    
    if (isNaN(quantidade) || quantidade <= 0) {
        alert('Por favor, insira uma quantidade válida.');
        return;
    } 

    let nomeProduto = produtoSelecionado.split('-')[0];
    let valorUnit = produtoSelecionado.split('R$') [1];

    // calcular preço (subtotal)
    let preco = quantidade * valorUnit;

    // adicionar no carrinho
    let carrinho = document.getElementById ('lista-produtos');
    carrinho.innerHTML = carrinho.innerHTML + `
        <section class="carrinho__produtos__produto">
          <span class="texto-azul">${quantidade}</span> ${nomeProduto} <span class="texto-azul">R$${preco}</span>
        </section>
    `;

    // atualizar o total geral
    totalGeral = totalGeral + preco;
    let campoTotal = document.getElementById('valor-total');
    campoTotal.textContent = `R$${totalGeral}`;
    document.getElementById('quantidade').value = 0;

}

function limpar() {
    totalGeral = 0;
    document.getElementById ('lista-produtos').innerHTML = '';
    document.getElementById('valor-total').textContent = 'R$ 0';

}

Para testar a primeira condição, inclui uma linha no HTML que cria uma opção "Selecione um produto" na lista:

    if (!produtoSelecionado || produtoSelecionado.trim() === '') {
        alert('Por favor, selecione um produto.');
        return;
    }

<form class="formulario">
  <label class="campo-grupo">
<span class="texto-medio-azul">Produto</span>
<select class="produto-input" name="produto" id="produto">
  <option value="" disabled selected>Selecione um produto</option>
  <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>

Crie um formulário simples com campos de entrada e utilize JavaScript para recuperar os valores digitados nos campos usando a propriedade value. Exiba os valores no console e na tela.

<!DOCTYPE html>
<html lang="pt-BR"> 
<head>
<title>Cadastro</title>
</head>

<body>

  <h1 class="titulo">
    Cadastre-se:
  </h1>

  <form class="formulario" id="formularioInfo">
    <label for="campoNome">Nome:</label>
    <input type="text" id="campoNome" name="nome">

    <label for="campoIdade">Idade:</label>
    <input type="text" id="campoIdade" name="idade">

    <label for="campoEndereco">Endereço:</label>
    <input type="text" id="campoEndereco" name="endereco"> 
    <button type="button" onclick="salvar()">Salvar</button>

    <div id='mostrarInfo'><span>Seu nome e idade irão aparecer aqui.</span></div>
  </form>

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

</html>

function salvar() {
    let nome = document.getElementById('campoNome').value;
    let idade = document.getElementById('campoIdade').value;
    let endereco = document.getElementById ('campoEndereco').value;

    document.getElementById('mostrarInfo').textContent = `Nome: ${nome}, Idade: ${idade}, Endereço: ${endereco}`;
        console.log (`Nome: ${nome}, Idade: ${idade}, Endereço: ${endereco}`);
}

Tenha um elemento HTML na página (por exemplo, um parágrafo) e utilize JavaScript para modificar seu conteúdo usando a propriedade textContent.

<!DOCTYPE html>
<html lang="pt-BR"> 
<head>
<title>Desafio - Alterar conteúdo</title>
</head>

<body>

  <p id="texto">Esse é o texto original</p>
  <button onclick="alterarConteudo()">Alterar Conteúdo</button>

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

</html>

function alterarConteudo() {
    let texto = document.getElementById('texto');
    texto.textContent = 'Definindo um novo texto!';
}

Oi, Aline! Como vai?

Agradeço por compartilhar.

Gostei da forma como você estruturou as validações para garantir entradas válidas no carrinho. Isso evita que valores incorretos prejudiquem o total e melhora muito a experiência do usuário. Sua lógica está bem clara e organizada, principalmente no uso dos if para impedir o avanço quando algo está errado.

Uma dica interessante para o futuro é usar o método toFixed() para formatar o preço com duas casas decimais.


let preco = 25.5;
console.log(preco.toFixed(2));

Esse código exibe o número com duas casas decimais, útil para mostrar valores monetários como R$25.50.

Conteúdos relacionados

Number.prototype.toFixed()

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

Garanta sua matrícula hoje e ganhe + 2 meses grátis