Vamos fazer uma Calculadora em JavaScript?

Objetivo

Criar uma calculadora funcional com layout bonito, digitando e executando contas básicas (+, −, ×, ÷) no navegador.

🧱 Estrutura Geral do Projeto

O projeto está todo contido em um único arquivo HTML. Ele é dividido em 3 partes principais:

<head> – configurações da página e estilos (CSS)
<body> – o conteúdo visível da calculadora (HTML)
<script> – a lógica de funcionamento (JavaScript)

1️⃣ HTML – Estrutura da Calculadora

<div class="calc">
  <input type="text" id="display" readonly>
  <div class="buttons">
      <!-- Botões numéricos e operadores -->
      <button onclick="appendToDisplay('7')">7</button>
      ...
      <button onclick="calculate()">=</button>
      <button onclick="clearDisplay()">C</button>
      <button onclick="appendToDisplay('/')">/</button>
  </div>
</div>

Explicando:

div.calc: container principal da calculadora.
input#display: campo onde os números e resultados aparecem. O atributo readonly evita que o usuário digite manualmente (tudo é inserido pelos botões).
div.buttons: organiza os botões num grid.
button: cada botão chama uma função via onclick.

2️⃣ CSS – Visual elegante e centralizado

.calc {
  width: 300px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  background-color: #fff;
}

Explicando os pontos principais:

Centralização: margin: 50px auto centraliza horizontalmente a calculadora na tela.
Design clean: com border-radius, box-shadow e cores neutras, temos um visual moderno.
Grid para botões:

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

Isso cria um grid com 4 colunas iguais e espaçamento entre os botões.

3️⃣ JavaScript – A lógica da calculadora

let display = document.getElementById('display');

Funções:

➕ `appendToDisplay(value)`

Adiciona o valor do botão ao campo display.

function appendToDisplay(value) {
  display.value += value;
}

✅ `calculate()`

Avalia a expressão digitada e mostra o resultado.

function calculate() {
  try {
      display.value = eval(display.value);
  } catch (error) {
      display.value = 'Erro';
  }
}

⚠️ eval() é uma função JavaScript que executa strings como código. É poderosa, mas perigosa em ambientes com entrada do usuário não confiável.

🔄 `clearDisplay()`

Limpa o visor.

function clearDisplay() {
  display.value = '';
}

4️⃣ 🧮 Explicando os Botões da Calculadora (HTML + JS)

📌 Onde estão os botões?

Eles estão dentro da <div class="buttons">:

<div class="buttons">
  <button onclick="appendToDisplay('7')">7</button>
  <button onclick="appendToDisplay('8')">8</button>
  ...
  <button onclick="calculate()">=</button>
  <button onclick="clearDisplay()">C</button>
  <button onclick="appendToDisplay('/')">/</button>
</div>

✅ Como funcionam?

1. Botões de números e operadores

Esses botões chamam a função appendToDisplay(valor) quando clicados.

Exemplo:

<button onclick="appendToDisplay('7')">7</button>

🔹 Quando o botão "7" é clicado, ele envia o número 7 para o campo de exibição (<input>), através da função:

function appendToDisplay(value) {
  display.value += value;
}

Essa função pega o valor atual do display e acrescenta o valor do botão clicado.

Ela funciona para todos os números e também para os operadores +, -, *, /, ..

2. Botão = (igual)

<button onclick="calculate()">=</button>

🔹 Esse botão executa o cálculo da expressão inteira usando:

function calculate() {
  try {
      display.value = eval(display.value);
  } catch (error) {
      display.value = 'Erro';
  }
}

🔧 A função eval() interpreta e resolve a expressão matemática como uma conta de verdade.

Se o usuário digitar 5+3*2 e clicar em =, o resultado será 11.

🔒 O uso de try/catch evita que erros "quebrem" a calculadora — se alguém digitar algo inválido, aparece a palavra "Erro".

3. Botão C (Clear / Limpar)

<button onclick="clearDisplay()">C</button>

🔹 Esse botão limpa o visor:

function clearDisplay() {
  display.value = '';
}

Ele simplesmente apaga o conteúdo do campo de input.

4. Botão ponto (.)

<button onclick="appendToDisplay('.')">.</button>

🔹 Esse botão serve para inserir números com casas decimais, como 3.14 ou 7.5.

💡 Código completo para testar

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calculadora CodandoBrasil</title>
  <style>
      body {
          font-family: Arial, sans-serif;
          text-align: center;
          background-color: #f9f9f9;
      }

      .calc {
          width: 300px;
          margin: 50px auto;
          padding: 20px;
          border: 1px solid #ccc;
          border-radius: 5px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
          background-color: #fff;
      }

      input[type="text"] {
          width: 100%;
          padding: 15px;
          margin-bottom: 10px;
          font-size: 20px;
          border: 1px solid #ccc;
          border-radius: 5px;
          box-sizing: border-box;
      }

      .buttons {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 10px;
      }

      button {
          padding: 20px;
          font-size: 18px;
          border: none;
          cursor: pointer;
          border-radius: 5px;
          background-color: #f0f0f0;
          transition: background-color 0.3s;
      }

      button:hover {
          background-color: #e0e0e0;
      }

      button:active {
          background-color: #d0d0d0;
      }
  </style>
</head>
<body>
  <div class="calc">
      <input type="text" id="display" readonly>
      <div class="buttons">
          <button onclick="appendToDisplay('7')">7</button>
          <button onclick="appendToDisplay('8')">8</button>
          <button onclick="appendToDisplay('9')">9</button>
          <button onclick="appendToDisplay('+')">+</button>
          <button onclick="appendToDisplay('4')">4</button>
          <button onclick="appendToDisplay('5')">5</button>
          <button onclick="appendToDisplay('6')">6</button>
          <button onclick="appendToDisplay('-')">-</button>
          <button onclick="appendToDisplay('1')">1</button>
          <button onclick="appendToDisplay('2')">2</button>
          <button onclick="appendToDisplay('3')">3</button>
          <button onclick="appendToDisplay('*')">*</button>
          <button onclick="appendToDisplay('0')">0</button>
          <button onclick="appendToDisplay('.')">.</button>
          <button onclick="calculate()">=</button>
          <button onclick="clearDisplay()">C</button>
          <button onclick="appendToDisplay('/')">/</button>
      </div>
  </div>

  <script>
      let display = document.getElementById('display');

      function appendToDisplay(value) {
          display.value += value;
      }

      function calculate() {
          try {
              display.value = eval(display.value);
          } catch (error) {
              display.value = 'Erro';
          }
      }

      function clearDisplay() {
          display.value = '';
      }
  </script>
</body>
</html>

Você pode encontrar outros conteúdos meus em:

https://codandobrasil.com.br/projetos/

Espero que tenham gostado, não deixem de fazer a frmção de JavaScripit da DIO, é é TOP demais!