Uma calculadora web moderna e responsiva com interface intuitiva, desenvolvida com HTML5, CSS3 e JavaScript vanilla. Oferece operações matemáticas básicas com design profissional e experiência de usuário otimizada para desktop e dispositivos móveis.
- Visão Geral do Projeto
- Estrutura de Diretórios
- Destaques & Funcionalidades
- Tecnologias Utilizadas
- Pré-requisitos
- Instalação
- Como Usar
- Configuração
- Responsividade
- Validação e Tratamento de Erros
- Arquitetura e Padrões
- Contribuição
- Licença
- Autora
A Calculadora Web é uma aplicação front-end que demonstra o desenvolvimento de interfaces interativas e funcionais utilizando tecnologias web fundamentais. O projeto foi criado para oferecer uma ferramenta de cálculos matemáticos acessível e responsiva, servindo tanto como uma calculadora funcional quanto como exemplo de boas práticas em desenvolvimento web.
Principais benefícios:
- Interface limpa e intuitiva com design moderno
- Suporte completo para operações matemáticas básicas e intermediárias
- Responsividade total para todos os dispositivos
- Navegação por teclado e clique
- Validação robusta de entrada e tratamento de erros
- Código limpo utilizando Factory Function pattern
Conceitos técnicos demonstrados:
- Factory Functions e encapsulamento
- Manipulação de DOM e eventos
- Design responsivo com CSS Grid e Flexbox
- Validação de entrada e tratamento de exceções
- Avaliação segura de expressões matemáticas
📦 calculadora/
├── src/
│ ├── css/
│ │ └── main.css # Estilos principais e responsividade
│ └── js/
│ └── script.js # Lógica da calculadora com Factory Function
├── .gitattributes # Configurações Git para normalização
├── index.html # Estrutura HTML principal da aplicação
├── LICENSE # Licença do projeto
└── README.md # Documentação completa do projeto- Operações básicas: adição (+), subtração (-), multiplicação (*), divisão (/)
- Suporte a parênteses para controle de precedência
- Números decimais com validação automática
- Cálculos com múltiplas operações em sequência
- Avaliação segura usando Function constructor com validações
- Paleta de cores em tons verdes com gradiente dinâmico
- Tipografia monospace para melhor legibilidade numérica
- Efeitos visuais com sombras e transições suaves
- Layout em grade otimizado para calculadoras
- Feedback visual nos botões com hover e active states
- Breakpoint principal em 460px para dispositivos móveis
- Adaptação automática do layout para telas pequenas
- Botões redimensionados mantendo usabilidade
- Background adaptativo (gradiente/sólido) conforme dispositivo
- Interface otimizada para touch em smartphones
- Validação de expressões matemáticas antes da avaliação
- Verificação de resultados finitos (evita Infinity/NaN)
- Tratamento de erros com alertas informativos
- Prevenção contra injeção de código malicioso
- Limitação segura das operações permitidas
- Navegação híbrida: clique e teclado (Enter para calcular)
- Auto-foco no display para digitação imediata
- Botão de limpeza (C) e exclusão de caractere (←)
- Display com alinhamento à direita seguindo padrão de calculadoras
- Feedback imediato para todas as interações
Este projeto foi construído utilizando as seguintes tecnologias:
- HTML5: Estrutura semântica com tabelas para layout da calculadora
- CSS3: Estilização com Flexbox, Grid, gradientes e media queries responsivas
- JavaScript ES6+: Lógica implementada com Factory Functions e manipulação de DOM
Para executar localmente:
- Navegador web moderno (Chrome 80+, Firefox 75+, Safari 13+, Edge 80+)
- Servidor local opcional (Live Server, Python SimpleHTTPServer, etc.)
Para desenvolvimento:
- Editor de código (VS Code, Sublime Text, etc.)
# 1. Clone este repositório
$ git clone https://github.com/emellybmuniz/calculadora.git
# 2. Navegue até o diretório do projeto
$ cd calculadora
# 3. Abra o arquivo index.html no navegador
# Linux
$ xdg-open index.html
# macOS
$ open index.html
# Windows
$ start index.htmlAlternativa: Versão online disponível aqui
- Inserção de Números - Clique nos botões numéricos ou digite diretamente no teclado
- Operações Matemáticas - Utilize os botões de operadores (+, -, *, /) ou digite
- Parênteses - Use ( ) para controlar a precedência das operações
- Calcular Resultado - Pressione "=" ou tecla Enter para executar o cálculo
- Limpar Display - Use o botão "C" para limpar completamente
- Exclusão - Utilize "«" para remover o último caractere digitado
// Operações básicas
2 + 3 = 5
10 - 4 = 6
7 * 8 = 56
15 / 3 = 5
// Operações com decimais
2.5 + 1.7 = 4.2
10.5 / 2 = 5.25
// Operações com parênteses
(2 + 3) * 4 = 20
10 / (2 + 3) = 2- Alinhamento: Texto alinhado à direita (padrão calculadoras)
- Font: Monospace para alinhamento consistente dos dígitos
- Largura: Responsiva com largura máxima de 20em
/* Personalização da paleta de cores */
:root {
--primary-gradient: linear-gradient(
-40deg,
#2c5049,
#345e5c,
#2c5046,
#4c685f
);
--button-bg: #dfdfdf;
--button-hover: #cdcdcd;
--equal-button: #3d5745;
--border-color: black;
}- Container centralizado com 600px de largura
- Botões com 85px de largura para clique confortável
- Background com gradiente dinâmico em tons verdes
- Layout em grade 4x5 otimizado para calculadoras
- Container com largura automática para se ajustar ao conteúdo
- Botões ajustados para 75px mantendo usabilidade
- Background sólido branco para melhor performance
- Alinhamento superior para facilitar o alcance do polegar
- Display mantém proporções para legibilidade
- Expressões Matemáticas: Verificação de sintaxe antes da avaliação
- Resultados Numéricos: Validação usando
isFinite()para evitar Infinity/NaN - Caracteres Permitidos: Apenas números, operadores e parênteses aceitos
- Divisão por Zero: Captura e tratamento específico
- Captura de exceções com try/catch durante avaliação
- Alertas informativos para o usuário ("Conta Inválida")
- Preservação do estado anterior em caso de erro
- Limpeza automática de entradas problemáticas
// Exemplo de validação implementada
try {
calculation = new Function("return " + calculation)();
if (!isFinite(calculation)) {
alert("Conta Inválida");
return;
}
} catch (e) {
alert("Conta Inválida");
return;
}A calculadora utiliza Factory Function para encapsulamento e organização:
function createCalculator() {
return {
display: document.querySelector(".display"),
// Métodos privados e públicos organizados
start(), clickBtn(), displayResult()
};
}- Encapsulamento: Propriedades e métodos organizados dentro do objeto
- Event Delegation: Uso de addEventListener para gerenciar eventos
- Método Binding: Contexto preservado com .bind(this)
- Separação de Responsabilidades: Métodos específicos para cada funcionalidade
Contribuições são sempre bem-vindas e muito apreciadas! Sinta-se à vontade para abrir uma issue ou enviar um pull request.
- Fork este repositório
- Clone seu fork:
git clone https://github.com/seu-usuario/calculadora.git - Crie uma branch para sua feature:
git checkout -b feature/nova-funcionalidade - Faça suas alterações e teste completamente
- Commit suas mudanças:
git commit -m 'Adiciona nova funcionalidade' - Push para a branch:
git push origin feature/nova-funcionalidade - Abra um Pull Request com descrição detalhada das mudanças
- Mantenha o código limpo e bem comentado
- Siga o padrão Factory Function existente
- Teste a responsividade em diferentes dispositivos
- Garanta que as validações continuem funcionando
Este projeto está licenciado sob a Licença MIT - consulte o arquivo LICENSE para obter mais detalhes.
A Licença MIT permite uso comercial, modificação, distribuição e uso privado do código, exigindo apenas a manutenção do aviso de copyright e licença.
Desenvolvido por Emelly Beatriz com ❤️
📬 Entre em contato: 📧 emellybmuniz@gmail.com | 💼 Linkedin | 🐙 Github
⭐ Gostou do projeto? Deixe uma estrela no repositório para apoiar o desenvolvimento!