CENTRAL STACKConteúdo tech
Projetos

Projeto prático para iniciantes: como fazer uma calculadora em JavaScript

Aprenda como fazer uma calculadora em JavaScript do zero usando HTML, CSS e JS, praticando lógica, eventos e manipulação do DOM.

Por Equipe Central Stack05/06/20269 minGuia prático
javascriptcalculadorafrontendportfolio

Compartilhar

Envie este conteúdo para sua rede ou salve o link para publicar depois.

Introdução

Criar uma calculadora em JavaScript é um dos melhores projetos práticos para quem está começando na programação. Esse tipo de projeto é simples, visual, fácil de testar no navegador e ajuda o iniciante a entender conceitos importantes de HTML, CSS e JavaScript ao mesmo tempo.

Se você está estudando JavaScript para iniciantes, provavelmente já viu conceitos como variáveis, funções, eventos, condicionais e manipulação de elementos da página. A calculadora é um projeto perfeito para juntar tudo isso em uma aplicação real.

Pessoa programando uma calculadora em JavaScript em um notebook.

Além disso, uma calculadora simples é um ótimo projeto para colocar no portfólio, principalmente se você está começando no front-end. Ela mostra que você sabe criar uma interface, organizar botões, capturar cliques, trabalhar com lógica de programação e exibir resultados na tela.

Neste artigo, você vai aprender como criar uma calculadora básica usando apenas HTML, CSS e JavaScript puro, sem frameworks e sem bibliotecas externas. A ideia é construir um projeto simples, direto e fácil de entender, seguindo um passo a passo claro.

O que vamos criar?

Neste projeto, vamos criar uma calculadora simples em JavaScript com as operações básicas:

  • soma
  • subtração
  • multiplicação
  • divisão

A calculadora terá visor para mostrar os números, botões numéricos, botão de limpar, botão de apagar, operadores matemáticos e botão de resultado.

Este é um projeto pequeno, mas muito útil para treinar fundamentos de programação. Com ele, você pratica estrutura HTML, estilização com CSS, eventos de clique, funções JavaScript, manipulação do DOM, operadores matemáticos e lógica de cálculo.

Interface final de uma calculadora escura criada com HTML, CSS e JavaScript.

O resultado final será uma calculadora funcional que pode ser aberta diretamente no navegador.

Arquivos do projeto

Antes de começar, crie uma pasta chamada calculadora-javascript.

Dentro dela, crie três arquivos:

estrutura
calculadora-javascript/
├── index.html
├── style.css
└── script.js

Essa estrutura é simples e ideal para projetos front-end de iniciantes.

  • O arquivo index.html será responsável pela estrutura da calculadora.
  • O arquivo style.css será usado para deixar a calculadora mais bonita.
  • O arquivo script.js terá a lógica da calculadora em JavaScript.

Separar HTML, CSS e JavaScript em arquivos diferentes deixa o projeto mais organizado e facilita a manutenção.

Criando o HTML da calculadora

Agora vamos começar pela estrutura da página.

No arquivo index.html, coloque o seguinte código:

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 em JavaScript</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main class="container">
    <section class="calculadora">
      <input type="text" id="visor" disabled />

      <div class="botoes">
        <button onclick="limparVisor()" class="operador">C</button>
        <button onclick="apagarUltimo()" class="operador">⌫</button>
        <button onclick="adicionarValor('/')" class="operador">÷</button>
        <button onclick="adicionarValor('*')" class="operador">?</button>

        <button onclick="adicionarValor('7')">7</button>
        <button onclick="adicionarValor('8')">8</button>
        <button onclick="adicionarValor('9')">9</button>
        <button onclick="adicionarValor('-')" class="operador">-</button>

        <button onclick="adicionarValor('4')">4</button>
        <button onclick="adicionarValor('5')">5</button>
        <button onclick="adicionarValor('6')">6</button>
        <button onclick="adicionarValor('+')" class="operador">+</button>

        <button onclick="adicionarValor('1')">1</button>
        <button onclick="adicionarValor('2')">2</button>
        <button onclick="adicionarValor('3')">3</button>
        <button onclick="calcularResultado()" class="igual">=</button>

        <button onclick="adicionarValor('0')" class="zero">0</button>
        <button onclick="adicionarValor('.')">.</button>
      </div>
    </section>
  </main>

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

Esse HTML cria a base da nossa calculadora com HTML, CSS e JavaScript.

O elemento input funciona como visor da calculadora. Ele está com disabled para impedir que o usuário digite diretamente nele. Os valores serão adicionados apenas pelos botões.

Cada botão chama uma função JavaScript usando onclick. Por exemplo, quando o usuário clica no número 7, a função adicionarValor("7") é executada.

Estilizando a calculadora com CSS

Agora vamos criar o visual da calculadora.

No arquivo style.css, coloque:

style.css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #111827, #312e81);
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  width: 100%;
  max-width: 400px;
  padding: 20px;
}

.calculadora {
  background: #1f2937;
  padding: 24px;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

#visor {
  width: 100%;
  height: 70px;
  border: none;
  border-radius: 12px;
  margin-bottom: 20px;
  padding: 0 16px;
  font-size: 32px;
  text-align: right;
  background: #111827;
  color: #ffffff;
}

.botoes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

button {
  height: 60px;
  border: none;
  border-radius: 12px;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  background: #374151;
  color: #ffffff;
  transition: 0.2s;
}

button:hover {
  background: #4b5563;
  transform: scale(1.03);
}

.operador {
  background: #6366f1;
}

.operador:hover {
  background: #4f46e5;
}

.igual {
  background: #22c55e;
  grid-row: span 2;
  height: 132px;
}

.igual:hover {
  background: #16a34a;
}

.zero {
  grid-column: span 2;
}

Esse CSS deixa a calculadora com aparência moderna, usando tons escuros, azul e roxo. Esse visual combina bem com projetos de programação, portfólio front-end e artigos sobre JavaScript.

Aqui usamos display: grid para organizar os botões em colunas. Essa é uma ótima prática para criar layouts simples e responsivos.

Criando a lógica com JavaScript

Agora vem a parte principal do projeto: a lógica da calculadora.

No arquivo script.js, coloque:

script.js
const visor = document.getElementById("visor");

function adicionarValor(valor) {
  visor.value += valor;
}

function limparVisor() {
  visor.value = "";
}

function apagarUltimo() {
  visor.value = visor.value.slice(0, -1);
}

function calcularResultado() {
  try {
    if (visor.value === "") {
      return;
    }

    const resultado = eval(visor.value);
    visor.value = resultado;
  } catch (erro) {
    visor.value = "Erro";
  }
}

Esse código é pequeno, mas já mostra vários conceitos importantes de JavaScript para iniciantes.

A linha abaixo pega o elemento do visor no HTML:

script.js
const visor = document.getElementById("visor");

A função adicionarValor adiciona números e operadores no visor:

script.js
function adicionarValor(valor) {
  visor.value += valor;
}

A função limparVisor apaga tudo:

script.js
function limparVisor() {
  visor.value = "";
}

A função apagarUltimo remove apenas o último caractere digitado:

script.js
function apagarUltimo() {
  visor.value = visor.value.slice(0, -1);
}

A função calcularResultado calcula a expressão digitada:

script.js
function calcularResultado() {
  try {
    if (visor.value === "") {
      return;
    }

    const resultado = eval(visor.value);
    visor.value = resultado;
  } catch (erro) {
    visor.value = "Erro";
  }
}

O try/catch serve para evitar que a aplicação quebre caso o usuário digite uma expressão inválida. Se acontecer algum erro, a calculadora mostra a palavra ?Erro? no visor.

Observação importante sobre o uso de eval

Neste projeto simples, usamos eval() para facilitar o entendimento da lógica da calculadora. Ele interpreta a expressão matemática que está no visor e retorna o resultado.

Porém, em projetos reais, é importante ter cuidado com eval(), porque ele executa código JavaScript a partir de uma string. Em aplicações profissionais, o ideal é validar melhor os dados ou usar uma lógica própria para calcular as operações.

Como este é um projeto de estudo, controlado pelos botões da própria calculadora, o uso aqui serve apenas para fins didáticos.

Esse tipo de observação é importante em artigos de programação, porque mostra cuidado com boas práticas, limitações e segurança, evitando conteúdo superficial ou perigoso.

Como testar a calculadora

Para testar o projeto, basta abrir o arquivo index.html no navegador.

Você pode clicar duas vezes no arquivo ou arrastá-lo para dentro do navegador.

Depois, teste algumas operações:

testes
10 + 5
20 - 8
6 * 7
50 / 2

Se tudo estiver correto, a calculadora vai mostrar o resultado no visor.

Esse é um projeto simples, mas já funciona como uma pequena aplicação web.

Por que esse projeto é bom para iniciantes?

A calculadora é um dos melhores projetos JavaScript para iniciantes porque junta teoria e prática.

Com ela, você aprende a criar uma estrutura HTML, estilizar uma interface com CSS, capturar eventos de clique, criar funções JavaScript e alterar elementos da página usando DOM.

Além disso, esse projeto ajuda a praticar lógica de programação. Mesmo sendo simples, ele mostra como o código responde às ações do usuário.

Outro ponto positivo é que a calculadora pode ser melhorada com o tempo. Você pode começar com uma versão básica e depois adicionar novas funções. Isso mostra evolução no seu portfólio.

Como colocar esse projeto no portfólio

Para usar essa calculadora no portfólio, não coloque apenas o código solto. Explique o que você criou.

Você pode escrever uma pequena descrição assim:

Calculadora simples desenvolvida com HTML, CSS e JavaScript puro. O projeto permite realizar operações básicas, como soma, subtração, multiplicação e divisão. Foi criado para praticar lógica de programação, manipulação do DOM e eventos de clique.

Também é interessante adicionar imagem do projeto funcionando, link para testar online, link do código no GitHub e uma breve explicação das tecnologias usadas.

Isso deixa seu portfólio mais profissional e mostra que você entende o que construiu.

Melhorias para evoluir o projeto

Depois de criar a primeira versão da calculadora, você pode adicionar melhorias.

Algumas ideias são:

  • modo claro e escuro
  • botão de porcentagem
  • histórico de cálculos
  • suporte ao teclado
  • animações nos botões
  • mensagem de erro mais bonita
  • layout responsivo para celular
  • versão sem usar eval()

Essas melhorias podem transformar um projeto simples em um projeto mais completo para portfólio.

Você também pode criar variações, como calculadora de IMC, calculadora de porcentagem, calculadora financeira, calculadora de juros simples, calculadora de desconto e conversor de moedas.

Essas ideias ajudam a criar novos conteúdos para o site sem repetir exatamente o mesmo artigo.

Erros comuns ao criar uma calculadora em JavaScript

Um erro comum é esquecer de conectar o arquivo JavaScript no HTML. Sem a linha abaixo, as funções não serão reconhecidas:

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

Outro erro é escrever o nome da função errado no botão. Se no HTML estiver onclick="adicionarValor('7')", a função no JavaScript precisa ter exatamente esse nome.

Também pode acontecer de esquecer o id="visor" no input. Nesse caso, o JavaScript não vai encontrar o elemento correto.

Outro erro comum é tentar fazer tudo de uma vez. O melhor é criar primeiro o HTML, depois o CSS e, por último, o JavaScript. Assim, fica mais fácil encontrar problemas.

Conclusão

Criar uma calculadora em JavaScript é um projeto simples, prático e muito útil para quem está começando no front-end.

Com esse projeto, você pratica HTML, CSS, JavaScript, eventos, funções, manipulação do DOM e lógica de programação. Além disso, a calculadora é uma ótima opção para colocar no portfólio, principalmente se você ainda está construindo seus primeiros projetos.

O mais importante é não apenas copiar o código. Tente entender cada parte, alterar o visual, testar novas funções e melhorar o projeto aos poucos.

Depois de finalizar essa calculadora simples, você pode evoluir para outros projetos práticos, como relógio digital, lista de tarefas, conversor de temperatura, gerador de senhas e formulário com validação.

Esses projetos ajudam a criar uma base sólida em JavaScript e mostram que você está praticando programação de forma real.

Fontes utilizadas