Pular para o conteúdo
murad.guide

As Três Camadas

Capítulo 12

Calculadora: HTML e CSS

4 min de leitura 735 palavras 1 gravura

A oficina precisa de uma calculadora de materiais: contas inteiras, sem porcentagem e sem vírgula decimal. Neste capítulo você monta só a cara: tela, botões e grade. O JavaScript vem depois. O exemplo está em exemplos/12-calculadora-html/.

Não copie a marca de um fabricante. As cores são nossas: fundo preto, tecla cinza #d8d9db e operação em terracota #c45c26.

Trabalhe na cópia inicio desta etapa. Leia e digite o código indicado; mude apenas uma coisa. Antes de recarregar, escreva o resultado que espera. Depois compare com a referência completa ao lado. Se algo falhar, confira primeiro o arquivo salvo e o caminho aberto.

O que você vai aprender

Tela e botões de verdade

A calculadora é um bloco. Dentro dele, uma tela mostra o número. Embaixo, as teclas.

<div class="calc">
  <section class="tela" aria-live="polite">0</section>
  <section class="teclas">
    <div class="linha">
      <button type="button" class="largo">C</button>
      <button type="button">&larr;</button>
      <button type="button" class="op">&divide;</button>
    </div>
  </section>
</div>

button é clicável no teclado e no mouse. Não use div no papel de tecla. type="button" evita envio de formulário se um dia a peça morar dentro de um form.

C limpa. ← apaga o último dígito. Nesta etapa os dois só existem na tela. O comportamento vem no capítulo 20.

&times; desenha ×. &divide; desenha ÷. &larr; desenha ←. Você também pode colar o caractere. Evite x e / se quiser o desenho da peça.

Não coloque tecla %. Não coloque tecla .. Tudo que entra é inteiro.

Pare e experimente. Troque o 0 da tela por 12. Preveja o número na direita da tela. Recarregue e confira.

Erro comum: usar x no lugar de ×. A conta depois lê um texto, não o sinal de multiplicar.

A grade em linhas flex

Cada linha é um flex. Quatro teclas cabem numa fileira. A primeira tem C mais largo. A última tem o zero mais largo e o igual.

<div class="linha">
  <button type="button">7</button>
  <button type="button">8</button>
  <button type="button">9</button>
  <button type="button" class="op">&times;</button>
</div>
<div class="linha">
  <button type="button" class="zero">0</button>
  <button type="button" class="op">=</button>
</div>

Repita o padrão para 4-5-6 com - e para 1-2-3 com +. A ordem visual é a de uma calculadora simples: números no meio, operações à direita.

justify-content: space-between espalha as teclas. A fresta preta entre elas é o fundo da caixa.

Pare e experimente. Tire a classe op do ÷. Preveja a tecla cinza. Recarregue, confira e devolva a classe.

Erro comum: colocar as dezesseis teclas num único flex sem flex-wrap e sem linhas. A conta de largura quebra e o zero não alinha.

Largura e cores da oficina

A caixa mede 25rem, cerca de 400px com a fonte padrão. Isso cabe numa janela estreita sem imitar um telefone de marca.

.calc {
  width: 25rem;
  max-width: 100%;
  background: #000;
  color: #fff;
}

.tela {
  font-family: "Courier New", Courier, monospace;
  font-size: 2.5rem;
  text-align: right;
  padding: 1.25rem 0.4rem;
}

.linha {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

.tecla,
.linha button {
  width: 24.5%;
  height: 6.25rem;
  border: 0;
  background: #d8d9db;
  font-size: 2rem;
}

.largo { width: 49.5%; }
.zero { width: 74.5%; }

.op {
  background: #c45c26;
  color: #fff;
}

Preto no corpo. Cinza #d8d9db nas teclas comuns. Terracota #c45c26 nas operações. Branco no número da tela.

:hover e :focus-visible precisam de contraste. Um cinza um pouco mais claro e um anel de cerca de 3px bastam. Não apague o foco.

O documento completo está no exemplo. Copie index.html e styles.css da pasta 12-calculadora-html. Ainda não ligue um script.

Calculadora da oficina com tela preta e teclas cinza e terracota

Compare a captura com o seu arquivo. A peça não leva logo de fabricante.

Pare e experimente. Troque só #c45c26 por #000. Preveja operações pretas no fundo preto. Recarregue, veja o erro de contraste e restaure a terracota.

Erro comum: copiar laranja de um telefone famoso. Neste volume a operação é terracota #c45c26.

O que esta etapa não faz

Clicar ainda não calcula. Isso é esperado. O capítulo 13 começa o JavaScript. A 20 liga esta interface.

Não publique a calculadora com a oficina sem revisar. Ela é um satélite: pasta própria, não uma página do site cultural.

Mantenha os símbolos como entidades ou caracteres. O texto da tecla será lido pelo script depois. Se você escrever dividir, o programa não vai reconhecer.

Atividades

  1. Por que as teclas são button e não div?
  2. Qual entidade desenha a seta de apagar?
  3. Quais duas teclas este volume deixa de fora de propósito?
  4. Qual a largura combinada da caixa e a cor das operações?

Respostas comentadas

  1. button já recebe clique, Enter e foco. div exigiria mais trabalho e falharia no teclado.
  2. &larr; produz ←.
  3. Porcentagem e ponto decimal. As contas deste exercício são inteiras.
  4. Cerca de 400px ou 25rem. Operações em #c45c26.

Referências