Descubra sua Idade - Projeto para teste do framework Svelte
Este projeto usa a API gratuita Agify para estimar a idade de uma pessoa pelo nome, com tema inspirado no anime One Piece.
🚀 Funcionalidades
- 🔍 Input com debounce de 800ms: evita requisições desnecessárias.
- 📡 Consulta automática à API agify.io.
- 🔗 A URL é atualizada com o nome pesquisado (ex:
/?name=Luffy
), permitindo compartilhamento direto.
- ⚡ Resultado exibido automaticamente conforme o nome é digitado.
- 💄 Interface com modo padrão e modo temático pirata:
- Ativável por um botão.
- Persistente via
localStorage
.
- Com fontes e cores inspiradas no universo de One Piece.
🧱 Tecnologias e boas práticas
- SvelteKit 5 (sem TypeScript).
- Utilização da função
load()
para busca da API.
- Separação clara de responsabilidades:
lib/utils/debounce.js
: lógica de debounce.
lib/api/agify.js
: comunicação com a API.
lib/components/PirateInput.svelte
: input com lógica isolada.
- Sem dependências externas — CSS puro, sem frameworks.
🎨 Estilização
- Fonte personalizada "Pirata One" (Google Fonts).
- Cores baseadas em mapas do tesouro: dourado, marrom escuro e preto.
- Ícones e frases customizadas para a temática pirata.
- Alternância de estilos com classe CSS condicional e temas com
localStorage
.
📦 Como rodar o projeto
npm install
npm run dev