[Para Iniciantes] Vamos Criar uma Calculadora Web! Guia de Desenvolvimento com Copia e Cola

Para executar Python no prompt de comando ou PowerShell no seu PC, é necessário baixar e instalar o Python.
Se ainda não o fez, consulte o artigo Instalação do Python e configuração do ambiente de desenvolvimento para instalar o Python.

"Comecei a programar, mas não sei o que fazer..."

Olá! Apenas alguns meses atrás, eu era um completo iniciante em programação, assim como vocês. Ao criar dois sites por conta própria com a ajuda da IA, percebi que "a maneira mais rápida de aprender é simplesmente criar algo e ver funcionar!"

Então, desta vez, vamos criar juntos um "aplicativo de calculadora", um projeto muito popular para o primeiro passo no aprendizado de programação, usando tecnologias web (HTML, CSS, JavaScript). O objetivo deste artigo é apenas um.

Dar a você a experiência de sucesso de "consegui criar um aplicativo que funciona no navegador apenas copiando e colando!".

Vou explicar os termos técnicos da forma mais simples possível. Vamos, vamos nos divertir juntos no mundo da criação!

Captura de tela do aplicativo de calculadora web finalizado — Ao final deste artigo, uma calculadora como esta estará funcionando no seu navegador!

Passo 1: Vamos Construir o Esqueleto da Calculadora com HTML

Primeiro, vamos criar a parte estrutural da calculadora com HTML. HTML é a linguagem que define o "esqueleto" de uma página da web. Vamos posicionar os componentes, como o visor e os botões.

O código HTML a seguir define todas as partes da calculadora.

<!-- HTML: Define o esqueleto da calculadora -->
<div class="calculator">
    <input type="text" class="display" id="display" readonly>
    <div class="buttons">
        <button onclick="clearDisplay()" class="clear">C</button>
        <button onclick="appendToDisplay('/')" class="operator">/</button>
        <button onclick="appendToDisplay('*')" class="operator">*</button>
        <button onclick="deleteLast()" class="operator">⌫</button>
        
        <button onclick="appendToDisplay('7')">7</button>
        <button onclick="appendToDisplay('8')">8</button>
        <button onclick="appendToDisplay('9')">9</button>
        <button onclick="appendToDisplay('-')" class="operator">-</button>

        <button onclick="appendToDisplay('4')">4</button>
        <button onclick="appendToDisplay('5')">5</button>
        <button onclick="appendToDisplay('6')">6</button>
        <button onclick="appendToDisplay('+')" class="operator">+</button>

        <button onclick="appendToDisplay('1')">1</button>
        <button onclick="appendToDisplay('2')">2</button>
        <button onclick="appendToDisplay('3')">3</button>
        <button onclick="calculateResult()" class="operator" style="grid-row: span 2;">=</button>

        <button onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button>
        <button onclick="appendToDisplay('.')">.</button>
    </div>
</div>

Explicação do Código

<div class="calculator">: Esta é a caixa grande que envolve toda a calculadora.
<input type="text" id="display" readonly>: Esta é a tela que exibe números e resultados. O atributo readonly impede a digitação direta pelo teclado.
<div class="buttons">: Uma caixa para agrupar todos os botões.
<button onclick="...">: Estes são os botões clicáveis. O atributo onclick especifica a função JavaScript (que criaremos mais tarde) a ser executada quando o botão é pressionado.

Neste ponto, parece apenas um amontoado de peças, sem design ou funcionalidade.

Passo 2: Vamos Estilizar a Aparência com CSS

Em seguida, vamos usar CSS para deixar a aparência mais legal. CSS é a linguagem que decora a "aparência" de uma página da web. Vamos adicionar cor e layout ao esqueleto que construímos com HTML.

O código CSS a seguir define o design da calculadora.

/* CSS: Estiliza a aparência da calculadora */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #333;
}
.calculator {
    background-color: #444;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.display {
    width: 100%;
    height: 70px;
    background-color: #222;
    color: white;
    font-size: 2.5em;
    /* ...outros estilos... */
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
button {
    height: 70px;
    font-size: 1.5em;
    border-radius: 10px;
    /* ...outros estilos... */
}
.operator {
    background-color: #f0ad4e;
}
.clear {
    background-color: #d9534f;
}

Explicação do Código

.calculator { ... }: Especifica o design da caixa chamada class="calculator" (a calculadora inteira).
.display { ... }: O design da tela de exibição. Aumenta o tamanho da fonte e torna o fundo preto.
.buttons { display: grid; ... }: Esta é a chave do layout! display: grid é um recurso poderoso para organizar itens em uma grade, como as células do Excel. grid-template-columns: repeat(4, 1fr); ordena "crie quatro colunas de larguras iguais".
.operator e .clear: Aplicam cores especiais apenas aos botões com esses nomes de classe específicos.

Passo 3: Vamos Dar Vida à Calculadora com JavaScript

Finalmente, vamos criar o "cérebro" da calculadora com JavaScript. JavaScript é a linguagem de programação que adiciona movimento e funcionalidade a páginas da web. Definiremos as ações específicas, como o que fazer quando um botão é pressionado.

// JavaScript: Esta é a parte do cérebro da calculadora
const display = document.getElementById('display');

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

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

function deleteLast() {
    display.value = display.value.slice(0, -1);
}

function calculateResult() {
    try {
        const result = eval(display.value);
        if (result === undefined || result === null || isNaN(result)) {
            display.value = 'Error';
        } else {
            display.value = result;
        }
    } catch (error) {
        display.value = 'Error';
    }
}

Explicação do Código

const display = ...: Obtém o elemento da tela de exibição do HTML e o armazena em uma variável chamada display.
appendToDisplay(value): Chamada quando um botão de número ou símbolo é pressionado, anexa o novo caractere à string na tela.
clearDisplay(): Para o botão "C". Limpa a tela.
calculateResult(): Para o botão "=". Usa a função eval() para calcular a expressão (string) no visor e substitui pelo resultado. O try...catch é uma proteção para exibir 'Erro' quando uma expressão inválida é inserida.

Bônus: O Código Completo e Como "Apresentá-lo"

Agora, a versão final da calculadora funcional é o que você obtém ao combinar HTML, CSS e JavaScript em um único arquivo. Caso você queira mostrar este código incrível para alguém ou apresentá-lo em seu blog, preparamos tanto o "código final" quanto o "código de escape para exibição".

💡 Produto Final (Salvar como .html e usar)

Copie todo este código, salve-o como calculadora.html e abra-o no seu navegador para ver a calculadora funcionando.

📜 Para Exibição (Para incorporar em blogs, etc.)

Este é o código final acima, mas com os caracteres < e > convertidos (escapados) para que possam ser exibidos com segurança em HTML. Cole isso entre as tags <pre><code> do seu blog.

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculadora Web</title>
    <style>
        /* CSS: Estiliza a aparência da calculadora */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #333;
            font-family: sans-serif;
            margin: 0;
        }
        .calculator {
            background-color: #444;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        }
        .display {
            width: 100%;
            height: 70px;
            background-color: #222;
            color: white;
            text-align: right;
            font-size: 2.5em;
            padding: 10px;
            box-sizing: border-box;
            border: 2px solid #555;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        button {
            height: 70px;
            font-size: 1.5em;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            background-color: #e9e9e9;
            color: #333;
            transition: background-color 0.2s;
        }
        button:hover {
            background-color: #ddd;
        }
        .operator {
            background-color: #f0ad4e;
            color: white;
        }
        .operator:hover {
            background-color: #ec9a29;
        }
        .clear {
            background-color: #d9534f;
            color: white;
        }
        .clear:hover {
            background-color: #c9302c;
        }
    </style>
</head>
<body>

    <!-- HTML: Define o esqueleto da calculadora -->
    <div class="calculator">
        <input type="text" class="display" id="display" readonly>
        <div class="buttons">
            <button onclick="clearDisplay()" class="clear">C</button>
            <button onclick="appendToDisplay('/')" class="operator">/</button>
            <button onclick="appendToDisplay('*')" class="operator">*</button>
            <button onclick="deleteLast()" class="operator">⌫</button>
            
            <button onclick="appendToDisplay('7')">7</button>
            <button onclick="appendToDisplay('8')">8</button>
            <button onclick="appendToDisplay('9')">9</button>
            <button onclick="appendToDisplay('-')" class="operator">-</button>

            <button onclick="appendToDisplay('4')">4</button>
            <button onclick="appendToDisplay('5')">5</button>
            <button onclick="appendToDisplay('6')">6</button>
            <button onclick="appendToDisplay('+')" class="operator">+</button>

            <button onclick="appendToDisplay('1')">1</button>
            <button onclick="appendToDisplay('2')">2</button>
            <button onclick="appendToDisplay('3')">3</button>
            <button onclick="calculateResult()" class="operator" style="grid-row: span 2;">=</button>

            <button onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button>
            <button onclick="appendToDisplay('.')">.</button>
        </div>
    </div>

    <script>
        // JavaScript: Esta é a parte do cérebro da calculadora
        const display = document.getElementById('display');

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

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

        function deleteLast() {
            display.value = display.value.slice(0, -1);
        }

        function calculateResult() {
            try {
                // 'eval' avalia uma string como uma expressão matemática.
                // Não é recomendado para sites reais por questões de segurança,
                // mas para este exemplo autocontido, é simples e eficaz.
                const result = eval(display.value);
                if (result === undefined || result === null || isNaN(result)) {
                    display.value = 'Error';
                } else {
                    display.value = result;
                }
            } catch (error) {
                display.value = 'Error';
            }
        }
    </script>

</body>
</html>

[Para Iniciantes] Vamos Criar uma Calculadora Web! Guia de Desenvolvimento com Copia e Cola

Passo 1: Vamos Construir o Esqueleto da Calculadora com HTML

Explicação do Código

Passo 2: Vamos Estilizar a Aparência com CSS

Explicação do Código

Passo 3: Vamos Dar Vida à Calculadora com JavaScript

Explicação do Código

Bônus: O Código Completo e Como "Apresentá-lo"

💡 Produto Final (Salvar como .html e usar)

📜 Para Exibição (Para incorporar em blogs, etc.)

Modelos Relacionados