🛠️ Projetos Práticos

Projeto Calculadora - Parte 2: Estrutura HTML e Definição da Interface

Tutorial com passos estruturados

• 5 min de leitura

Projeto Calculadora - Parte 2: Estrutura HTML e Definição da Interface

Série “Projeto Calculadora” — 4 partes, do planejamento ao código funcionando: 1. Requisitos e funcionalidades · 2. Estrutura HTML (você está aqui) · 3. Estilização com CSS · 4. Lógica com JavaScript

Introdução

Na primeira parte desta série definimos os requisitos da calculadora. Agora vamos transformá-los em marcação HTML: o display para exibir números e resultados, e os botões para os dígitos e operadores. Cada elemento será explicado detalhadamente, incluindo decisões de acessibilidade que passam despercebidas na maioria dos tutoriais de calculadora.

Estrutura HTML da Calculadora

Vamos criar a estrutura HTML da nossa calculadora. Aqui está o código completo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minha calculadora</title>
    <link rel="stylesheet" href="/calculadora/style.css">
</head>
<body>
    <div>
        <form id="calculator" class="calculator">
            <div class="display" id="display" role="status" aria-live="polite">0</div>
            <div class="buttons">
                <button type="button" onclick="appendNumber('1')">1</button>
                <button type="button" onclick="appendNumber('2')">2</button>
                <button type="button" onclick="appendNumber('3')">3</button>
                <button type="button" class="operator" onclick="appendOperator('+')">+</button>
                <button type="button" onclick="appendNumber('4')">4</button>
                <button type="button" onclick="appendNumber('5')">5</button>
                <button type="button" onclick="appendNumber('6')">6</button>
                <button type="button" class="operator" onclick="appendOperator('-')">-</button>
                <button type="button" onclick="appendNumber('7')">7</button>
                <button type="button" onclick="appendNumber('8')">8</button>
                <button type="button" onclick="appendNumber('9')">9</button>
                <button type="button" class="operator" onclick="appendOperator('*')">*</button>
                <button type="button" onclick="appendNumber('0')">0</button>
                <button type="button" onclick="clearDisplay()">C</button>
                <button type="button" class="equal" aria-label="Calcular resultado" onclick="calculateResult()">=</button>
                <button type="button" class="operator" onclick="appendOperator('/')">/</button>
            </div>
        </form>
    </div>
    <script src="/calculadora/script.js"></script>
</body>
</html>

Já incluímos aqui as classes operator e equal e o display acessível (role="status" + aria-live) que vamos detalhar a seguir — assim o código desta parte já bate exatamente com o que a parte 3 estiliza e a parte 4 manipula via JavaScript.

Explicação dos Campos e Elementos

1. Doctype e Elementos de Cabeçalho (<head>)

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minha calculadora</title>
    <link rel="stylesheet" href="/calculadora/style.css">
</head>
  • <!DOCTYPE html>: Define o tipo de documento como HTML5.
  • <html lang="pt-br">: Inicia o documento HTML e define o idioma da página como português do Brasil — importante para leitores de tela pronunciarem o conteúdo corretamente.
  • <meta charset="UTF-8">: Especifica a codificação de caracteres como UTF-8, garantindo que todos os caracteres sejam exibidos corretamente.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Configura a viewport para tornar o layout responsivo em dispositivos móveis.
  • <title>Minha calculadora</title>: Define o título da página, que aparecerá na aba do navegador.
  • <link rel="stylesheet" href="/calculadora/style.css">: Vincula o arquivo de estilo CSS externo que vamos escrever na parte 3.

2. Corpo do Documento (<body>)

<body>
    <div>
        <form id="calculator" class="calculator">
            <div class="display" id="display" role="status" aria-live="polite">0</div>
            <div class="buttons">
  • <body>: Inicia o corpo do documento HTML onde todo o conteúdo visível da página estará presente.
  • <div>: Cria uma divisão (div) para agrupar os elementos da calculadora.
  • <form id="calculator" class="calculator">: Define um formulário com ID calculator e classe calculator que contém todos os elementos da calculadora. Usar formulário permite futuras melhorias, como envio de dados; como não há nenhum campo que exige submissão de fato, também seria válido usar uma simples <section> — a escolha aqui é uma questão de gosto.

3. Campo de Exibição

Um erro comum em tutoriais de calculadora é usar <input type="text" disabled> para o display. Isso funciona visualmente, mas o atributo disabled remove o elemento da árvore de acessibilidade — leitores de tela como NVDA e VoiceOver simplesmente o ignoram, então quem depende de leitor de tela não fica sabendo qual é o resultado atual.

Por isso, usamos uma <div> semântica no lugar do <input>:

<div class="display" id="display" role="status" aria-live="polite">0</div>
  • role="status" e aria-live="polite": anunciam automaticamente para leitores de tela sempre que o conteúdo da div muda — exatamente o que precisamos quando um número é digitado ou um resultado é calculado.
  • Como o display só exibe texto e nunca recebe digitação direta do teclado, uma <div> é mais simples que um <input> e já resolve o problema sem atributos extras de formulário. Ajustaremos a função JavaScript correspondente na parte 4, usando textContent em vez de .value.

4. Botões (<button>)

<div class="buttons">
    <button type="button" onclick="appendNumber('1')">1</button>
    <button type="button" onclick="appendNumber('2')">2</button>
    <button type="button" onclick="appendNumber('3')">3</button>
    <button type="button" class="operator" onclick="appendOperator('+')">+</button>
    <button type="button" onclick="appendNumber('4')">4</button>
    <button type="button" onclick="appendNumber('5')">5</button>
    <button type="button" onclick="appendNumber('6')">6</button>
    <button type="button" class="operator" onclick="appendOperator('-')">-</button>
    <button type="button" onclick="appendNumber('7')">7</button>
    <button type="button" onclick="appendNumber('8')">8</button>
    <button type="button" onclick="appendNumber('9')">9</button>
    <button type="button" class="operator" onclick="appendOperator('*')">*</button>
    <button type="button" onclick="appendNumber('0')">0</button>
    <button type="button" onclick="clearDisplay()">C</button>
    <button type="button" class="equal" aria-label="Calcular resultado" onclick="calculateResult()">=</button>
    <button type="button" class="operator" onclick="appendOperator('/')">/</button>
</div>
  • <div class="buttons">: Agrupa todos os botões dentro de um contêiner com a classe buttons.
  • <button type="button" onclick="function()">texto</button>: Cria botões do tipo button. Usar type="button" (em vez do padrão submit) é importante aqui: como os botões estão dentro de um <form>, sem essa declaração explícita cada clique tentaria enviar o formulário e recarregar a página.
  • Cada botão chama uma função JavaScript específica ao ser clicado (appendNumber, appendOperator, clearDisplay, calculateResult).
  • class="operator" e class="equal": identificam os botões de operação e o botão de igual para que a parte 3 possa estilizá-los com cores diferentes dos botões numéricos.
  • aria-label="Calcular resultado" no botão de igual: reforça a intenção da ação para leitores de tela, já que o símbolo = sozinho pode ser ambíguo fora de contexto.

Por que os atributos * e / como texto, e não × e ÷? Usar os símbolos matemáticos × (multiplicação) e ÷ (divisão) deixa a interface mais legível para o usuário, mesmo mantendo * e / internamente na lógica JavaScript. Vale a pena aplicar esse ajuste visual na parte de estilização.

5. Inclusão do JavaScript

<script src="/calculadora/script.js"></script>
</body>
</html>
  • <script src="/calculadora/script.js"></script>: Inclui o arquivo JavaScript externo que conterá a lógica da nossa calculadora. Colocar o <script> no final do <body> garante que os botões já existam no DOM antes do JavaScript tentar manipulá-los.

Tabela-resumo dos elementos

ElementoPapel na calculadora
<form id="calculator">Contêiner principal, agrupa toda a interface
<div id="display" role="status">Mostra o valor digitado e o resultado, de forma acessível
<div class="buttons">Agrupa os 16 botões em um grid
<button onclick="appendNumber(...)">Adiciona um dígito ao display
<button onclick="appendOperator(...)">Adiciona um operador (+, -, *, /)
<button onclick="clearDisplay()">Reseta o display e o estado interno
<button onclick="calculateResult()">Calcula e exibe o resultado

Conclusão

Nesta segunda parte, construímos a estrutura HTML da nossa calculadora e cobrimos um ponto que a maioria dos tutoriais pula: acessibilidade do display e dos botões. Explicamos o papel de cada elemento, desde os cabeçalhos até os botões de interação, e já preparamos o terreno para os atributos que a parte 4 vai manipular via JavaScript.

No próximo passo, vamos estilizar a calculadora com CSS para torná-la visualmente atraente e, em seguida, implementar a lógica em JavaScript para torná-la funcional.

Comentários

Não foi possível carregar os comentários no momento.

Deixe seu comentário

Posts Relacionados

Continue sua leitura com conteúdos parecidos.