Como Criar uma Calculadora Simples com HTML, CSS e JavaScript

Atualizado em: 25 de fevereiro de 2025

uma calculadora, caneta e um livro de capa vermelha

Se você deseja aprender a criar uma calculadora simples usando apenas HTML, CSS e JavaScript, está no lugar certo! Neste tutorial, vamos construir uma calculadora funcional, passo a passo, para que você possa entender cada parte do processo.

Confira o exemplo da nossa calculadora em funcionamento no CodePen abaixo. Basta clicar e começar a usar para entender como ela foi desenvolvida:

See the Pen Calculadora by Código Fácil (@CodigoFacil) on CodePen.

Acompanhe o passo a passo neste tutorial para aprender a criar a sua própria versão!

O Que Você Vai Aprender

Estrutura básica de uma calculadora com HTML.
Estilização da interface usando CSS.
Lógica de funcionamento da calculadora com JavaScript.

Passo 1: Estrutura HTML

Para começar, crie um arquivo HTML com a seguinte estrutura:

index.html

HTML

<!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>
    <!-- Carrega o arquivo CSS para estilizar a calculadora -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calculadora">
        <!-- Visor da calculadora -->
        <input type="text" id="visor" readonly>
        
        <!-- Botões da calculadora -->
        <div class="botoes">
            <button onclick="limpar()">C</button>
            <button onclick="apagar()">←</button>
            <button onclick="adicionar('%')">%</button>
            <button class="operador" onclick="adicionar('/')">/</button>
            
            <button onclick="adicionar('7')">7</button>
            <button onclick="adicionar('8')">8</button>
            <button onclick="adicionar('9')">9</button>
            <button class="operador" onclick="adicionar('*')">*</button>
            
            <button onclick="adicionar('4')">4</button>
            <button onclick="adicionar('5')">5</button>
            <button onclick="adicionar('6')">6</button>
            <button class="operador" onclick="adicionar('-')">-</button>
            
            <button onclick="adicionar('1')">1</button>
            <button onclick="adicionar('2')">2</button>
            <button onclick="adicionar('3')">3</button>
            <button class="operador" onclick="adicionar('+')">+</button>
            
            <button onclick="adicionar('0')">0</button>
            <button onclick="adicionar('.')">.</button>
            <button onclick="calcular()" class="operador" style="grid-column: span 2;">=</button>
        </div>
    </div>
    <!-- Carrega o arquivo JS para as funções da calculadora -->
    <script src="script.js" defer></script>
</body>
</html>

Neste código, criamos o layout básico da calculadora. Temos um input que servirá como visor, e diversos botões para as operações matemáticas e números.

Passo 2: Estilizando com CSS

Agora que temos a estrutura, vamos usar o CSS para dar um estilo visual agradável à calculadora. Use o seguinte

style.css

CSS

/* Estilos CSS para a calculadora */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}
.calculadora {
    background-color: #333;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
#visor {
    width: 100%;
    height: 40px;
    font-size: 24px;
    text-align: right;
    margin-bottom: 10px;
    padding: 5px;
    background-color: #eee;
    border: none;
}
.botoes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}
button {
    padding: 10px;
    font-size: 18px;
    border: none;
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}
button:hover {
    background-color: #45a049;
}
.operador {
    background-color: #f44336;
}
.operador:hover {
    background-color: #da190b;
}

Aqui usamos um layout de grade para organizar os botões da calculadora e aplicamos um design moderno com cores contrastantes.

Passo 3: Implementando a Lógica com JavaScript

Agora, vamos adicionar o JavaScript para fazer a calculadora funcionar.

script.js

JavaScript

// Função para adicionar um valor ao visor
function adicionar(valor) {
    document.getElementById('visor').value += valor;
}

// Função para limpar o visor
function limpar() {
    document.getElementById('visor').value = '';
}

// Função para apagar o último caractere
function apagar() {
    var visor = document.getElementById('visor');
    visor.value = visor.value.slice(0, -1);
}

// Função para calcular o resultado
function calcular() {
    var visor = document.getElementById('visor');
    try {
        // Usa a função eval() para calcular o resultado
        // Nota: eval() pode ser perigoso com entrada não confiável
        visor.value = eval(visor.value);
    } catch (error) {
        // Se houver um erro na expressão, mostra "Erro" no visor
        visor.value = 'Erro';
    }
}

Aqui, utilizamos a função eval() para avaliar a expressão matemática digitada no visor. Porém, é importante destacar que o uso de eval() pode ser perigoso se forem permitidas entradas não confiáveis. Para garantir segurança, utilize apenas com dados confiáveis.

Conclusão

Com este tutorial, você aprendeu a criar uma calculadora simples, mas funcional, usando HTML, CSS e JavaScript. A partir daqui, você pode expandir essa calculadora, adicionando mais funcionalidades ou aprimorando o design.

Essa calculadora é ideal para quem está começando a aprender desenvolvimento web e deseja praticar a criação de interfaces interativas.

Se você gostou deste projeto, confira outros projetos práticos de programação no nosso blog e continue aprimorando suas habilidades!