💱 Conversor de Moeda com Axios - GoDevs

Conversor de moeda em tempo real usando Axios e AwesomeAPI. Projeto profissional desenvolvido com HTML5, CSS3 e JavaScript puro (ES6+).

Sobre • Funcionalidades • Capturas • Como rodar

---

📌 Detalhes do Projeto

• Objetivo: converter BRL para USD e EUR em tempo real com boa experiência de uso
• Tipo: projeto front-end (HTML, CSS, JS)
• Status: concluído
• API: AwesomeAPI (cotações em tempo real)
• Layout: responsivo e moderno (glassmorphism)
• Atualizado: janeiro 2026

---

📋 Sumário

• Sobre o Projeto
• Requisitos
• Tecnologias Utilizadas
• Funcionalidades
• Capturas de Tela
• Estrutura do Projeto
• Como Rodar
• Arquitetura do Código
• API Utilizada
• Desenvolvedor
• Agradecimentos

---

💡 Sobre o Projeto

Este projeto é um conversor de moeda em tempo real que permite converter valores em Real (BRL) para Dólar Americano (USD) e Euro (EUR). Desenvolvido com foco em boas práticas, código limpo e arquitetura modular, o projeto demonstra:

✨ Consumo de API REST usando Axios
✨ Programação Assíncrona com async/await
✨ Design Responsivo para todos os dispositivos
✨ Sistema de Cache para otimização de requisições
✨ Tratamento de Erros robusto e amigável
✨ Componentização CSS com arquitetura modular

---

✅ Requisitos

• Navegador moderno (Chrome, Edge, Firefox ou Safari)
• Conexão com a internet para consumir a API
• Opcional: Live Server ou servidor local para melhor experiência

---

🚀 Tecnologias Utilizadas

Tecnologia	Descrição
HTML5	Estrutura semântica e acessível
CSS3	Design moderno com variáveis, glassmorphism e animações
JavaScript (ES6+)	Funções assíncronas, arrow functions, template literals
Axios	Cliente HTTP para requisições à API
AwesomeAPI	API de cotações de moedas em tempo real

---

🎨 Funcionalidades

✅ Conversão em tempo real de BRL para USD e EUR
✅ Interface responsiva (mobile, tablet, desktop)
✅ Loading spinner durante requisições
✅ Validação de input (apenas números positivos)
✅ Tratamento de erros com mensagens claras
✅ Cache inteligente de cotações por 60 segundos
✅ Conversão ao pressionar Enter
✅ Botão desabilitado durante loading
✅ Animações suaves (fade, slide, shake)
✅ Design glassmorphism moderno e profissional

---

📸 Capturas de Tela

Tela Inicial	Carregando
Conversão Realizada	Tratamento de Erro

---

📁 Estrutura do Projeto

Conversor de Moeda com Axios/
├── index.html              # Página principal
├── css/
│   ├── style.css          # Arquivo principal com imports
│   ├── variables.css      # Variáveis e tokens de design
│   ├── reset.css          # Reset e estilos base
│   ├── components.css     # Componentes (card, input, botão, etc.)
│   └── responsive.css     # Media queries
├── js/
│   └── script.js          # Lógica de conversão
├── assets/
│   ├── preview-idle.png
│   ├── preview-success.png
│   ├── preview-loading.png
│   └── preview-error.png
└── README.md

---

🔧 Como Rodar o Projeto

📌 Opção 1: Abrir diretamente

Basta abrir o arquivo index.html no seu navegador.

📌 Opção 2: Live Server (Recomendado)

# Com Live Server
npx live-server

# Ou com Python
python -m http.server 8000

Acesse: http://localhost:8000

---

📚 Arquitetura do Código

JavaScript - Funções Principais

Função	Descrição
fetchRates()	Busca cotações da API com Axios e sistema de cache (60s)
formatMoney(value, currency)	Formata valores monetários usando Intl.NumberFormat
validateInput(value)	Valida se o input é um número positivo
setLoading(isLoading)	Controla estado de loading (spinner + botão)
renderResult(amount, rates)	Renderiza resultados da conversão na tela
renderError(message)	Exibe mensagem de erro amigável
handleConvert()	Função principal que orquestra a conversão

CSS - Arquitetura Modular

Arquivo	Responsabilidade
variables.css	Cores, gradientes, espaçamentos, tipografia, sombras
reset.css	Normalização e estilos base do layout
components.css	Card, input, botão, spinner, resultado, erro
responsive.css	Breakpoints para mobile (480px) e tablet (768px)

---

🌐 API Utilizada

AwesomeAPI - Economia
Endpoint: https://economia.awesomeapi.com.br/last/USD-BRL,EUR-BRL

Exemplo de Resposta:

{
  "USDBRL": {
    "code": "USD",
    "codein": "BRL",
    "name": "Dólar Americano/Real Brasileiro",
    "high": "5.1523",
    "low": "5.1123",
    "bid": "5.1234"
  },
  "EURBRL": {
    "code": "EUR",
    "codein": "BRL",
    "name": "Euro/Real Brasileiro",
    "high": "5.7023",
    "low": "5.6523",
    "bid": "5.6789"
  }
}

---

👨‍💻 Desenvolvedor

Guilherme Queiroz (Guielihan)

---

🎓 Agradecimentos e Referências

---

Feito com 💙 por Guielihan