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 atributoreadonlyevita 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 viaonclick.
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 autocentraliza horizontalmente a calculadora na tela. - Design clean: com
border-radius,box-shadowe 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!
