voltera-search-age Svelte Themes

Voltera Search Age

Projeto para teste simples do framework Svelte

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

Top categories

Loading Svelte Themes