DevQuestPROEstudos de Código
Voltar para o Catálogo de Projetos
IniciantefrontendEstimativa: ~4 horas de dedicação

Calculadora Interativa & Histórico

Crie uma calculadora moderna com suporte a operações em cadeia, histórico de cálculos anteriores e atalhos de teclado.

Stack:HTMLCSS/TailwindJavaScriptDOM
Funcionalidades Requeridas

O que o seu projeto final precisa conter para ser considerado concluído:

  • Operações básicas (+, -, *, / e porcentagem)
  • Histórico de cálculos salvos em LocalStorage
  • Suporte a teclas numéricas e Enter do teclado
  • Alternância entre tema claro e escuro
Conhecimentos Pré-requisitos

Recomendamos dominar os seguintes tópicos antes de iniciar a codificação:

  • Variáveis e tipos de dados
  • Funções básicas
  • Event Listeners
Documentação & Links de Apoio

Consulte materiais oficiais e tutoriais relacionados para acelerar o desenvolvimento do projeto:

W3Schools
W3Schools: CSS Grid Layout Tutorial

Guia completo com exemplos de grid-template-columns e gap.

Docs / MDN
MDN: EventTarget.addEventListener()

Documentação de captura de eventos do teclado e cliques.

Docs / MDN
MDN: Window.localStorage

Persistência simples de pares chave/valor no navegador.

DevQuest Labs
DevQuest Labs: Web Playground

Ambiente livre para prototipar seu layout HTML/CSS antes de codificar.

Submeta o seu Repositório

Concluiu o projeto Calculadora Interativa & Histórico? Envie o link do GitHub para registrar no seu portfólio.

Roteiro de Implementação Passo a Passo

Siga as etapas recomendadas, abra as dicas práticas e marque conforme for progredindo.

Progresso do Projeto(0/4 etapas concluídas)
0%
Etapa 1

Estrutura e Layout Neumórfico

Crie a grade de botões (grid) e o visor digital responsivo usando Tailwind CSS.

Etapa 2

Máquina de Estados de Operação

Gerencie o valor atual, operador pendente e valor acumulado com lógica pura e segura.

Etapa 3

Tratamento de Exceções & Atalhos de Teclado

Impeça divisão por zero, múltiplos pontos decimais e adicione listener de teclado.

Etapa 4

Persistência do Histórico em LocalStorage

Grave os últimos cálculos realizados para consulta mesmo após recarregar a página.

Estrutura de Pastas Recomendada

Uma organização limpa para o seu repositório de projeto:

src/
├── components/
│   ├── Calculator.tsx       # Componente mestre com visor e botões
│   ├── HistoryDrawer.tsx    # Gaveta com histórico de cálculos
│   └── Display.tsx          # Visor digital formatado
├── hooks/
│   └── useCalculator.ts     # Hook desacoplado com a máquina de estados
└── utils/
    └── math.ts              # Funções puras de cálculo e formatação
Dicas de Ouro para o seu Portfólio

Como valorizar este projeto no seu GitHub e entrevistas técnicas:

  • •No README do seu repositório, destaque que você evitou 'eval()' criando um parser seguro de expressões matemáticas.
  • •Grave um GIF de 5 segundos demonstrando a digitação no teclado físico e adicione no topo do README.
  • •Mostre domínio de Clean Code separando a lógica matemática em um Custom Hook reutilizável (useCalculator).