Uma aplicação web moderna e responsiva para conversão de moedas em tempo real, desenvolvida com JavaScript vanilla, HTML5 e CSS3.
- Interface Moderna: Design limpo com gradientes roxos e animações suaves
- Responsivo: Otimizado para desktop, tablet e dispositivos móveis
- Conversão em Tempo Real: Atualização automática conforme você digita
- Múltiplas APIs: Sistema robusto com fallback para garantir funcionamento
- Offline Ready: Taxas de câmbio offline como backup
- Acessibilidade: Suporte completo a screen readers e navegação por teclado
- Frontend: HTML5, CSS3, JavaScript (ES6+)
- APIs: ExchangeRate-API, CurrencyAPI (backup)
- Fontes: Google Fonts (Poppins)
- Metodologia: CSS Grid, Flexbox, Mobile First
- 🇺🇸 USD - Dólar Americano
- 🇧🇷 BRL - Real Brasileiro
- 🇪🇺 EUR - Euro
- 🇬🇧 GBP - Libra Esterlina
- 🇯🇵 JPY - Iene Japonês
- 🇨🇦 CAD - Dólar Canadense
- 🇦🇺 AUD - Dólar Australiano
- ✅ Conversão automática durante digitação
- ✅ Troca rápida entre moedas (botão swap)
- ✅ Formatação localizada dos valores
- ✅ Validação de entrada em tempo real
- ✅ Estados de loading e erro
- ✅ Animações e feedback visual
- 🔄 Sistema de fallback com múltiplas APIs
- 📱 Design totalmente responsivo
- ⌨️ Atalhos de teclado (Ctrl+Enter, Ctrl+Shift+S)
- 🎨 Efeitos visuais (ripple, animações CSS)
- 💾 Histórico de conversões (em desenvolvimento)
- Navegador web moderno
- Servidor web local (opcional, para desenvolvimento)
-
Clone o repositório
git clone https://github.com/DevAlex-full/conversor-moedas.git cd conversor-moedas -
Abra o arquivo
# Opção 1: Abrir diretamente no navegador open index.html # Opção 2: Servidor local (Python) python -m http.server 8000 # Acesse http://localhost:8000 # Opção 3: Live Server (VS Code) # Instale a extensão Live Server e clique com botão direito em index.html
Para taxas de câmbio mais precisas, configure uma chave da API:
- Registre-se em CurrencyAPI
- Obtenha sua chave gratuita
- Edite
src/scripts/engine.js:this.currencyApiKey = 'SUA_CHAVE_AQUI';
conversor-moedas/
├── index.html # Página principal
├── src/
│ ├── css/
│ │ ├── reset.css # Reset CSS
│ │ └── main.css # Estilos principais
│ └── scripts/
│ └── engine.js # Lógica da aplicação
├── screenshots/ # Capturas de tela
├── README.md # Este arquivo
└── LICENSE # Licença do projeto
- Digite o valor que deseja converter
- Selecione a moeda de origem no primeiro dropdown
- Selecione a moeda de destino no segundo dropdown
- Veja o resultado atualizado automaticamente
- Use o botão de troca (⇄) para inverter as moedas
Ctrl/Cmd + Enter: Forçar conversãoCtrl/Cmd + Shift + S: Trocar moedas
As variáveis CSS estão centralizadas em :root no arquivo main.css:
:root {
--primary-purple: #8B5CF6;
--secondary-purple: #A78BFA;
--dark-purple: #6D28D9;
--accent-purple: #EC4899;
/* ... outras variáveis */
}- Edite o array de moedas em
engine.js - Adicione os símbolos e nomes correspondentes
- Atualize as taxas de fallback
- URL:
https://api.exchangerate-api.com/v4/latest/ - Limitações: 1500 requests/mês (gratuito)
- Vantagem: Sem necessidade de chave API
- URL:
https://api.currencyapi.com/v3/latest - Limitações: 300 requests/mês (gratuito)
- Vantagem: Mais precisa e confiável
- Taxas fixas atualizadas manualmente
- Garantem funcionamento mesmo sem internet
- Incluem pequena variação para simular flutuação
- ✅ Chrome 60+
- ✅ Firefox 55+
- ✅ Safari 12+
- ✅ Edge 79+
- 💻 Desktop (1920px+)
- 💻 Laptop (1366px+)
- 📱 Tablet (768px+)
- 📱 Mobile (320px+)
Contribuições são sempre bem-vindas! Para contribuir:
- Fork o projeto
- Crie uma branch para sua feature (
git checkout -b feature/AmazingFeature) - Commit suas mudanças (
git commit -m 'Add some AmazingFeature') - Push para a branch (
git push origin feature/AmazingFeature) - Abra um Pull Request
- 📈 Gráficos de histórico de taxas
- 🔔 Notificações de mudanças significativas
- 🌍 Mais moedas suportadas
- 📱 PWA (Progressive Web App)
- 🎨 Temas alternativos
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para detalhes.
DevAlex-full
- GitHub: @DevAlex-full
- ExchangeRate-API pelos dados de câmbio
- Google Fonts pela fonte Poppins
- CurrencyAPI pela API de backup
- Comunidade open source pelas inspirações
- Histórico de conversões persistente
- Gráfico de tendências
- Modo escuro/claro
- Calculadora de gastos em viagem
- PWA com funcionamento offline
- Notificações push
- Mais moedas e criptomoedas
- API própria para taxas
⭐ Se este projeto foi útil, considere dar uma estrela!
Versão atual: v1.0.0
Status: 🟢 Online e Funcional