Projeto 4: Calculadora Simples

A calculadora simples é um projeto excelente para consolidar os fundamentos do JavaScript, porque ela junta entrada de dados, lógica de decisão, manipulação de interface e tratamento de erros básicos (como divisão por zero ou campos vazios).

Pense nela como uma “mini central de decisões”: o usuário informa dois valores, escolhe uma operação, e o sistema decide qual cálculo executar e mostra o resultado.

O que este projeto reforça

Neste projeto, você revisa e pratica:

• Variáveis para armazenar dados de entrada e resultado.
• Conversão de tipos (texto para número).
• Condicionais para escolher a operação correta.
• Eventos para reagir ao clique em botões.
• Funções para organizar o código em blocos claros.
• Manipulação do DOM para ler inputs e exibir saída.
• Validações para evitar resultados inválidos.

Estrutura mental da calculadora

Uma forma simples de pensar o fluxo:

1. Capturar os dois números digitados.
2. Capturar qual operação o usuário escolheu.
3. Validar se os dados são números válidos.
4. Executar a operação com base em uma condição.
5. Mostrar o resultado na tela.

Esse fluxo representa muito bem aplicações reais: entrada → processamento → saída.

Exemplo completo (HTML + CSS + JS em um único arquivo)

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Calculadora Simples</title>
  <style>
    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      background: #f4f6fb;
      font-family: Arial, sans-serif;
    }

    .card {
      background: #fff;
      width: 100%;
      max-width: 360px;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    }

    h1 {
      margin-top: 0;
      text-align: center;
      font-size: 1.3rem;
      color: #222;
    }

    .campo {
      margin-bottom: 10px;
    }

    input, select {
      width: 100%;
      padding: 10px;
      border: 1px solid #cdd5e1;
      border-radius: 8px;
      font-size: 0.95rem;
      box-sizing: border-box;
    }

    button {
      width: 100%;
      border: none;
      background: #2563eb;
      color: #fff;
      padding: 10px;
      border-radius: 8px;
      cursor: pointer;
      margin-top: 8px;
      font-size: 0.95rem;
    }

    button:hover {
      background: #1f54c7;
    }

    #resultado {
      margin-top: 14px;
      background: #eef2ff;
      padding: 10px;
      border-radius: 8px;
      color: #1e3a8a;
      font-weight: bold;
      text-align: center;
      min-height: 20px;
    }
  </style>
</head>
<body>
  <main class="card">
    <h1>Calculadora Simples</h1>

    <div class="campo">
      <input id="numero1" type="number" placeholder="Primeiro número" />
    </div>

    <div class="campo">
      <input id="numero2" type="number" placeholder="Segundo número" />
    </div>

    <div class="campo">
      <select id="operacao">
        <option value="somar">Somar (+)</option>
        <option value="subtrair">Subtrair (-)</option>
        <option value="multiplicar">Multiplicar (×)</option>
        <option value="dividir">Dividir (÷)</option>
      </select>
    </div>

    <button id="calcular">Calcular</button>

    <p id="resultado"></p>
  </main>

  <script>
    const inputNumero1 = document.getElementById("numero1");
    const inputNumero2 = document.getElementById("numero2");
    const selectOperacao = document.getElementById("operacao");
    const botaoCalcular = document.getElementById("calcular");
    const campoResultado = document.getElementById("resultado");

    function calcular(num1, num2, operacao) {
      if (operacao === "somar") return num1 + num2;
      if (operacao === "subtrair") return num1 - num2;
      if (operacao === "multiplicar") return num1 * num2;

      if (operacao === "dividir") {
        if (num2 === 0) {
          return "Erro: divisão por zero não é permitida.";
        }
        return num1 / num2;
      }

      return "Operação inválida.";
    }

    botaoCalcular.addEventListener("click", () => {
      const num1 = Number(inputNumero1.value);
      const num2 = Number(inputNumero2.value);
      const operacao = selectOperacao.value;

      if (inputNumero1.value.trim() === "" || inputNumero2.value.trim() === "") {
        campoResultado.textContent = "Preencha os dois números.";
        return;
      }

      const resultado = calcular(num1, num2, operacao);
      campoResultado.textContent = `Resultado: ${resultado}`;
    });
  </script>
</body>
</html>

Conceitos importantes por trás da calculadora

• Number(...) converte valores de input (string) para número.
• Condicionais (if) escolhem qual operação executar.
• Função calcular(...) separa a lógica de negócio da interface.
• Evento de clique dispara o cálculo quando o usuário interage.
• Validações impedem comportamentos inesperados.

Boas práticas usadas

• Código dividido em etapas claras (captura, validação, cálculo, exibição).
• Mensagens amigáveis para o usuário.
• Lógica central isolada em função reutilizável.
• Tratamento de caso especial (divisão por zero).

Próximas evoluções possíveis

Você pode enriquecer esse projeto com:

• Histórico de operações.
• Botão de limpar campos.
• Suporte a porcentagem e potência.
• Teclado numérico visual com botões.
• Cálculo ao pressionar Enter.
• Formatação de casas decimais no resultado.