Conteudo
Introdução
Nesta segunda parte do tutorial, como criar uma calculador com HTML, CSS e Javascript devamos nos concentrar na estruturação HTML da nossa calculadora. Vamos definir a interface do usuário, incluindo o display para exibir números e resultados, e os botões para os dígitos e operadores. Cada elemento será explicado detalhadamente para garantir uma compreensão completa do código.
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">
<input type="text" id="display" class="display" disabled>
<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" 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" 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" onclick="appendOperator('*')">*</button>
<button type="button" onclick="appendNumber('0')">0</button>
<button type="button" onclick="clearDisplay()">C</button>
<button type="button" onclick="calculateResult()">=</button>
<button type="button" onclick="appendOperator('/')">/</button>
</div>
</form>
</div>
<script src="/calculadora/script.js"></script>
</body>
</html>
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.<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 para estilizar a calculadora.
2. Corpo do Documento (<body>)
<body>
<div>
<form id="calculator" class="calculator">
<input type="text" id="display" class="display" disabled>
<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 IDcalculatore classecalculatorque contém todos os elementos da calculadora. Usar formulário permite futuras melhorias, como envio de dados.
3. Campo de Exibição (<input>)
<input type="text" id="display" class="display" disabled>
<input type="text" id="display" class="display" disabled>: Cria um campo de texto para exibir números e resultados. Está desabilitado (disabled) para impedir a entrada direta do usuário. O campo possui o IDdisplaye a classedisplay.
<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" 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" 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" onclick="appendOperator('*')">*</button>
<button type="button" onclick="appendNumber('0')">0</button>
<button type="button" onclick="clearDisplay()">C</button>
<button type="button" onclick="calculateResult()">=</button>
<button type="button" onclick="appendOperator('/')">/</button>
</div>
<div class="buttons">: Agrupa todos os botões dentro de um contêiner com a classebuttons.<button type="button" onclick="function()">texto</button>: Cria botões do tipobutton. Cada botão chama uma função JavaScript específica ao ser clicado (appendNumber,appendOperator,clearDisplay,calculateResult). Os botões exibem números ou operadores.
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. Este arquivo será criado nas próximas etapas do tutorial.
Conclusão
Nesta segunda parte do tutorial, construímos a estrutura HTML da nossa calculadora, estabelecendo a base para as funcionalidades e estilos que serão adicionados nas próximas etapas. Explicamos o papel de cada elemento do HTML, desde os cabeçalhos até os botões de interação. No próximo passo, vamos estilizar a calculadora utilizando CSS para torná-la visualmente atraente e, em seguida, implementar a lógica em JavaScript para torná-la funcional.
