Calculadora semelhante ao Design da Apple: Iphone

Funcionalidades

Operações Básicas: Soma, subtração, multiplicação e divisão.
Limpar: A funcionalidade de limpar a tela (botão C).
Apagar: A funcionalidade de apagar o último caractere (botão <).
Resultado: Exibe o resultado da operação ao pressionar o botão de igual (=).
Interface Intuitiva: Design responsivo e simples, com botões grandes e fáceis de interagir.

Notas:

Este é um projeto de uma calculadora simples desenvolvida utilizando HTML, CSS e JavaScript. A calculadora permite realizar operações matemáticas básicas, como soma, subtração, multiplicação e divisão. Confira a implementação completa do projeto no GitHub.

Tecnologias Utilizadas

HTML: Estrutura e layout da página.
CSS: Estilização da interface, incluindo a disposição dos botões e o design geral.
JavaScript: Lógica de cálculo e manipulação de eventos nos botões.

Como Usar

Abrir o arquivo: Basta abrir o arquivo index.html em seu navegador para utilizar a calculadora.
Clique nos botões: Use os botões numéricos e operacionais para construir uma operação matemática.
Pressione =: Após inserir uma operação, clique no botão = para calcular o resultado.
Limpar/Apagar: Se desejar limpar o visor, clique em C. Para apagar o último caractere, clique em <.

Exemplos de Operações

5 + 3 = 8
9 * 2 = 18
8 - 4 = 4
10 / 2 = 5

Como fazer?

Este tutorial mostra como construir uma calculadora simples, inspirada no visual do iPhone, com funcionalidades básicas como somar, subtrair, multiplicar e dividir. Também adaptamos o tamanho da fonte conforme a quantidade de caracteres no display.

📁 Estrutura de Pastas da calculadora

Estrutura do Projeto

🧑🏽‍💻 HTML – Estrutura da Calculadora `index.html`

Aqui criamos a estrutura principal com botões organizados em uma tabela, além de um elemento p que exibe o resultado dos cálculos.

Este projeto consiste na criação de uma calculadora básica usando três tecnologias principais:

HTML para estruturar os elementos da página.
CSS (referência externa) para estilização visual.
JavaScript (referência externa) para a lógica funcional da calculadora. Passos da criação do projeto:

Passo a Passo

Passo 1: Estrutura HTML da Página

Crie um arquivo chamado index.html e defina a estrutura básica com
<!DOCTYPE html>. Inclua as tags <html>, <head> com meta e link para o CSS, além do <title>.

Passo 2: Criando o Corpo da Calculadora

Dentro da <body>, adicione uma <div class="calc"> para ser o contêiner da calculadora. Dentro dela, insira outra <div class="calc-wrapper"> que vai conter o visor e os botões.

Passo 3: Criando o Visor

Insira uma tag <p id="resultado"></p> para exibir os números e resultados da calculadora. Este elemento será manipulado via JavaScript para mostrar os cálculos em tempo real.

Passo 4: Montando os Botões com Tabela

Crie uma estrutura de tabela <table> com várias linhas (<tr>) e colunas (<td>).
Cada botão será inserido como <button> com funções onclick chamando funções como insert('7'), clean(), etc.

Passo 5: Adicionando os Estilos (CSS)

Crie um arquivo style.css dentro da pasta css/. Adicione estilos para as classes como .btn, .btn-ext, .btn-other, e para os contêineres .calc e .calc-wrapper.

Passo 6: Criando a Lógica com JavaScript

Crie um arquivo script.js dentro da pasta js/. Nele, escreva as funções insert(valor), clean(), back() e calcular() para que a calculadora funcione corretamente.

Passo 7: Importando o JavaScript no HTML

No final do <body>, adicione a linha: <script src="./js/script.js"></script>
Isso vai carregar a lógica da calculadora quando a página for aberta no navegador.

Passo 8: Testando no Navegador

Abra o arquivo index.html em um navegador. Verifique se os botões funcionam, se o visor atualiza corretamente e se os cálculos são realizados com sucesso.

Abaixo, vamos entender cada parte do código HTML:

1. Estrutura HTML da Página

A primeira parte do código define a estrutura básica de uma página da web:

index.html

<!DOCTYPE html>
<html lang="pt-br">

Define que o documento é HTML5.
O idioma é definido como português do Brasil.

Dentro da tag <head>, temos:

index.html

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Calculadora 2.0</title>
  <link rel="stylesheet" href="./css/style.css" />
</head>

charset="UTF-8" garante que acentos e caracteres especiais funcionem corretamente.
viewport torna o site responsivo em dispositivos móveis.
title define o nome exibido na aba do navegador.
link importa o arquivo CSS para estilizar os elementos da calculadora.

2. Criação do Corpo da Calculadora

A parte visual principal da calculadora está dentro do <body>. Veja:

index.html

<body>
  <div class="calc">
    <div class="calc-wrapper">
<!-- continua abaixo... -->

Notas:

Lembrando que o codigo completado fica sempre ao final dos passos!

3. Visor da Calculadora

index.html

<body>
  <div class="calc">
    <div class="calc-wrapper">
    <p id="resultado"></p>
<!-- continua abaixo... -->

Esse parágrafo serve como visor, onde será exibido o que o usuário está digitando e o resultado do cálculo.
Seu conteúdo será manipulado via JavaScript.

4. Botões da Calculadora (Teclado)

A calculadora é organizada como uma tabela para alinhar os botões corretamente:

index.html

<table>
  <tr>...</tr>
</table>

Cada <tr> representa uma linha de botões, e os <td> representam botões individuais.

Os botões têm classes diferentes para que possam ser estilizados separadamente:

.btn: números
.btn-ext: operadores principais (+, -, *, =)
.btn-other: ações especiais (C, <, /)

Exemplo de botão:

index.html

<td><button class="btn" onclick="insert('7')">7</button></td>

5. Ligando o JavaScript

Ao final do <body>:

index.html

<script src="./js/script.js"></script>

O script JavaScript externo é carregado e será responsável por fazer a calculadora funcionar.
Lá estarão as funções como insert, clean, back e calcular.

Codigo html completo:

index.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 2.0</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <div class="calc">
      <div class="calc-wrapper">
        <p id="resultado"></p>
        <table>
          <!-- Primeira linha -->
          <tr>
            <td><button class="btn-other" onclick="clean()">C</button></td>
            <td><button class="btn-other" onclick="back()">&lt;</button></td>
            <td><button class="btn-other" onclick="insert('/')">/</button></td>
            <td><button class="btn-ext" onclick="insert('*')">X</button></td>
          </tr>
          <!-- Linhas de números -->
          <tr>
            <td><button class="btn" onclick="insert('7')">7</button></td>
            <td><button class="btn" onclick="insert('8')">8</button></td>
            <td><button class="btn" onclick="insert('9')">9</button></td>
            <td><button class="btn-ext" onclick="insert('-')">-</button></td>
          </tr>
          <tr>
            <td><button class="btn" onclick="insert('4')">4</button></td>
            <td><button class="btn" onclick="insert('5')">5</button></td>
            <td><button class="btn" onclick="insert('6')">6</button></td>
            <td><button class="btn-ext" onclick="insert('+')">+</button></td>
          </tr>
          <tr>
            <td><button class="btn" onclick="insert('1')">1</button></td>
            <td><button class="btn" onclick="insert('2')">2</button></td>
            <td><button class="btn" onclick="insert('3')">3</button></td>
            <td rowspan="2">
              <button class="btn-ext" style="height: 106px;" onclick="calcular()">=</button>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <button class="btn" style="width: 106px;" onclick="insert('0')">0</button>
            </td>
            <td><button class="btn" onclick="insert('.')">.</button></td>
          </tr>
        </table>
      </div>
    </div>
    <script src="./js/script.js"></script>
  </body>
</html>

🎨 CSS – Estilo da Calculadora (css/style.css)

Estilização com cores escuras, arredondamento e responsividade no display.

style.css

:root {
  --radius: 90px;
  --gray: #5c5c5f;
  --gray-white: #76767a;
  --gray-black-scale: #424246;
  --gray-black: #2a2a2c;
  --orange-color: #ff9f09;
  --orange-white-color: #ffbb4e;
  --color-white: #fff;
}

Define variáveis globais para cores e bordas arredondadas.
Ajuda a manter o estilo consistente e facilita alterações futuras.
Exemplo: --gray-black é usado como fundo de botões numéricos.

Estilização do body

style.css

body {
  background-color: #212121;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  color: var(--color-white);
}

Fundo escuro para contraste com os botões.
Fonte sans-serif para melhor leitura.
Texto centralizado.
Cor do texto branca, usando a variável --color-white.

Contêiner da calculadora `.calc-wrapper`

style.css

.calc-wrapper {
  position: absolute;
  background-color: #000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px;
  padding: 15px;
}

Centraliza a calculadora na tela com position: absolute + transform.
Fundo preto sólido.
Bordas arredondadas com border-radius.
Espaçamento interno com padding.

Botões gerais

style.css

.btn, .btn-ext, .btn-other {
  width: 50px;
  height: 50px;
  font-size: 25px;
  margin: 3px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--color-white);
}

Define um estilo base para todos os botões.
Botões são circulares (border-radius: 90px).
Sem bordas visíveis.
Cor do texto branca.
Cursor muda para "mãozinha" ao passar o mouse.

Botões numéricos `.btn`

style.css

.btn {
  background-color: var(--gray-black);
}
.btn:hover {
  background-color: var(--gray-black-scale);
}

Fundo escuro para números.
Ao passar o mouse, fica um pouco mais claro.3

Botões de operação `.btn-ext`

style.css

.btn-ext {
  background-color: var(--orange-color);
}
.btn-ext:hover {
  background-color: var(--orange-white-color);
}

Laranja forte para operadores (+, -, *, =).
Efeito de hover mais claro para indicar interação.

Botões especiais .btn-other

style.css

.btn-other {
  background-color: var(--gray);
}
.btn-other:hover {
  background-color: var(--gray-white);
}

Usados para ações como limpar (C), voltar (<) ou dividir (/).
Cinza padrão e cinza mais claro no hover.

Visor da calculadora `#resultado`

style.css

#resultado {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 207px;
  height: 80px;
  margin: 5px;
  padding: 5px;
  font-size: 28px;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: var(--radius);
}

Usa Flexbox para alinhar o conteúdo à direita e ao centro verticalmente.
Tamanho fixo para o visor.
overflow: hidden + text-overflow: ellipsis evita que textos longos transbordem.
Visual elegante e funcional.

Codigo css completo:

style.css

:root {
  --radius: 90px;
  --gray: #5c5c5f;
  --gray-white: #76767a;
  --gray-black-scale: #424246;
  --gray-black: #2a2a2c;
  --orange-color: #ff9f09;
  --orange-white-color: #ffbb4e;
  --color-white: #fff;
}

body {
  background-color: #212121;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  color: var(--color-white);
}

.calc-wrapper {
  position: absolute;
  background-color: #000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px;
  padding: 15px;
}

.btn,
.btn-ext,
.btn-other {
  width: 50px;
  height: 50px;
  font-size: 25px;
  margin: 3px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--color-white);
}

.btn {
  background-color: var(--gray-black);
}

.btn:hover {
  background-color: var(--gray-black-scale);
}

.btn-ext {
  background-color: var(--orange-color);
}

.btn-ext:hover {
  background-color: var(--orange-white-color);
}

.btn-other {
  background-color: var(--gray);
}

.btn-other:hover {
  background-color: var(--gray-white);
}

#resultado {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 207px;
  height: 80px;
  margin: 5px;
  padding: 5px;
  font-size: 28px;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: var(--radius);
}

🧠 JavaScript – Funcionalidades da Calculadora (js/script.js)

Este script lida com a inserção dos números, operações, limpeza, backspace e cálculo final.

📘 Arquivo: `main.js`

Este arquivo controla toda a lógica da calculadora: exibição, operações matemáticas, limpeza, ajuste de fonte e controle de caracteres.

🔄 Início automático com valor "0"

main.js

window.onload = function () {
  document.getElementById("resultado").innerHTML = "0";
};

Define o valor inicial no visor como "0" sempre que a página é carregada.

🔠 Função: `ajustarTamanhoFonte()`

main.js

function ajustarTamanhoFonte() {
  const resultado = document.getElementById("resultado");
  const comprimento = resultado.innerHTML.length;

  if (comprimento >= 10) {
    resultado.style.fontSize = "20px";
  } else if (comprimento >= 5) {
    resultado.style.fontSize = "25px";
  } else {
    resultado.style.fontSize = "28px";
  }
}

Ajusta o tamanho da fonte com base na quantidade de caracteres exibidos.

➕ Função: `insert(num)`

main.js

function insert(num) {
  const resultado = document.getElementById("resultado");

  if (resultado.innerHTML === "0") {
    resultado.innerHTML = num;
  } else {
    resultado.innerHTML += num;
  }

  ajustarTamanhoFonte();
}

Insere um número ou operador no visor da calculadora.
Substitui o 0 inicial se necessário.

🧹 Função: `clean()`

main.js

function clean() {
  const resultado = document.getElementById("resultado");
  resultado.innerHTML = "0";
  ajustarTamanhoFonte();
}

Limpa todo o conteúdo do visor e volta para "0".

Função: `back()`

main.js

function back() {
  const resultado = document.getElementById("resultado");
  let valorAtual = resultado.innerHTML;

  if (valorAtual.length > 1) {
    resultado.innerHTML = valorAtual.slice(0, -1);
  } else {
    resultado.innerHTML = "0";
  }

  ajustarTamanhoFonte();
}

Apaga o último caractere inserido.
Se restar apenas um, volta para "0".

🧮 Função: `calcular()`

main.js

function calcular() {
  const resultado = document.getElementById("resultado");
  if (!resultado || resultado.innerHTML.trim() === "") {
    resultado.innerHTML = "Nada...";
    return;
  }

  try {
    const expressao = resultado.innerHTML;

    // Impede divisão por zero
    if (/\\b\\/\\s*0\\b/.test(expressao)) {
      resultado.innerHTML = "Indefinido!";
      return;
    }

    resultado.innerHTML = eval(expressao);
  } catch (erro) {
    resultado.innerHTML = "Indefinido!";
  }

  ajustarTamanhoFonte();
}

Realiza o cálculo da expressão matemática.
Bloqueia divisões por zero e trata erros com try/catch.

Codigo JavaScript completo:

main.js

// Ao carregar a página, exibe "0"
window.onload = function () {
  document.getElementById("resultado").innerHTML = "0";
};

function ajustarTamanhoFonte() {
  const resultado = document.getElementById("resultado");
  const comprimento = resultado.innerHTML.length;

  if (comprimento >= 10) {
    resultado.style.fontSize = "20px";
  } else if (comprimento >= 5) {
    resultado.style.fontSize = "25px";
  } else {
    resultado.style.fontSize = "28px";
  }
}

function insert(num) {
  const resultado = document.getElementById("resultado");

  if (resultado.innerHTML === "0") {
    resultado.innerHTML = num;
  } else {
    resultado.innerHTML += num;
  }

  ajustarTamanhoFonte();
}

function clean() {
  const resultado = document.getElementById("resultado");
  resultado.innerHTML = "0";
  ajustarTamanhoFonte();
}

function back() {
  const resultado = document.getElementById("resultado");
  let valorAtual = resultado.innerHTML;

  if (valorAtual.length > 1) {
    resultado.innerHTML = valorAtual.slice(0, -1);
  } else {
    resultado.innerHTML = "0";
  }

  ajustarTamanhoFonte();
}

function calcular() {
  const resultado = document.getElementById("resultado");
  if (!resultado || resultado.innerHTML.trim() === "") {
    resultado.innerHTML = "Nada...";
    return;
  }

  try {
    const expressao = resultado.innerHTML;

    // Impede divisão por zero
    if (/\b\/\s*0\b/.test(expressao)) {
      resultado.innerHTML = "Indefinido!";
      return;
    }

    resultado.innerHTML = eval(expressao);
  } catch (erro) {
    resultado.innerHTML = "Indefinido!";
  }

  ajustarTamanhoFonte();
}

✅ Resultado Final

Uma calculadora funcional, bonita e simples, que:

Exibe os valores no topo da tela.
Ajusta o tamanho da fonte automaticamente.
Aceita operações básicas.
Mostra mensagens como "Indefinido!" para divisões por zero.

🛠️ Considerações Finais

Você pode adaptar o layout para mobile com media queries.
Para maior segurança, substitua eval() por um parser de expressões.
Experimente adicionar funcionalidades como porcentagem ou raiz quadrada!

Está curtindo nosso conteúdo?

Considere nos apoiar com uma doação! Na página Sobre você encontra mais informações sobre como contribuir 💖

Criando uma calculadora com HTML, CSS E Javascript!

Calculadora semelhante ao Design da Apple: Iphone

Funcionalidades

Tecnologias Utilizadas

Como Usar

Exemplos de Operações

Como fazer?

📁 Estrutura de Pastas da calculadora

Estrutura do Projeto

🧑🏽‍💻 HTML – Estrutura da Calculadora index.html

Passo a Passo

Passo 1: Estrutura HTML da Página

Passo 2: Criando o Corpo da Calculadora

Passo 3: Criando o Visor

Passo 4: Montando os Botões com Tabela

Passo 5: Adicionando os Estilos (CSS)

Passo 6: Criando a Lógica com JavaScript

Passo 7: Importando o JavaScript no HTML

Passo 8: Testando no Navegador

Abaixo, vamos entender cada parte do código HTML:

1. Estrutura HTML da Página

2. Criação do Corpo da Calculadora

3. Visor da Calculadora

4. Botões da Calculadora (Teclado)

5. Ligando o JavaScript

Codigo html completo:

🎨 CSS – Estilo da Calculadora (css/style.css)

Estilização do body

Contêiner da calculadora .calc-wrapper

Botões gerais

Botões numéricos .btn

Botões de operação .btn-ext

Botões especiais .btn-other

Visor da calculadora #resultado

Codigo css completo:

🧠 JavaScript – Funcionalidades da Calculadora (js/script.js)

📘 Arquivo: main.js

🔄 Início automático com valor "0"

🔠 Função: ajustarTamanhoFonte()

➕ Função: insert(num)

🧹 Função: clean()

Função: back()

🧮 Função: calcular()

Codigo JavaScript completo:

✅ Resultado Final

🛠️ Considerações Finais

Está curtindo nosso conteúdo?

🧑🏽‍💻 HTML – Estrutura da Calculadora `index.html`

Contêiner da calculadora `.calc-wrapper`

Botões numéricos `.btn`

Botões de operação `.btn-ext`

Visor da calculadora `#resultado`

📘 Arquivo: `main.js`

🔠 Função: `ajustarTamanhoFonte()`

➕ Função: `insert(num)`

🧹 Função: `clean()`

Função: `back()`

🧮 Função: `calcular()`