Aplicação web para montar e visualizar times Pokémon. O usuário pesquisa ou navega pelos 151 Pokémon da primeira geração, seleciona seis para compor seu time, dá um nome a ele e vê um painel final com as estatísticas de cada Pokémon.
- Busca de Pokémon por nome ou número (1–151)
- Navegação sequencial com botões Anterior / Próximo
- Seleção de até 6 Pokémon para o time, com remoção por clique
- Fundo dinâmico que muda de cor conforme o tipo do Pokémon exibido
- Página de resultado com nome do time, imagens animadas e 4 estatísticas base (HP, Ataque, Defesa, Velocidade)
- Badges de tipo com cores correspondentes para os 18 tipos existentes
| Tecnologia | Uso |
|---|---|
| HTML5 / CSS3 | Estrutura e estilos base |
| JavaScript (Vanilla) | Lógica da aplicação, manipulação de DOM |
| TailwindCSS v3 | Estilização via classes utilitárias |
| PokeAPI v2 | Dados e sprites dos Pokémon |
| LocalStorage | Passagem de dados entre páginas |
| Google Fonts (Oxanium) | Tipografia temática |
- Node.js instalado (para compilar o Tailwind)
- Um servidor local simples (extensão Live Server do VS Code, por exemplo)
# Clone o repositório
git clone https://github.com/CaioViniciusPF/Projeto-3-GTI.git
cd Projeto-3-GTI
# Instale as dependências
npm install
# Compile o Tailwind em modo watch (mantenha rodando durante o desenvolvimento)
npm startDepois abra src/index.html com o Live Server (ou outro servidor local).
Atenção: abrir o arquivo diretamente pelo navegador (
file://) pode bloquear as chamadas à PokeAPI por restrições de CORS. Use um servidor local.
Projeto-3-GTI/
├── src/
│ ├── index.html # Página principal — busca e montagem do time
│ └── times.html # Página de resultado — exibe o time montado
├── js/
│ ├── script.js # Lógica da busca, navegação e seleção de Pokémon
│ └── scriptTime.js # Lógica de carregamento e exibição do time
├── style/
│ └── style.css # Estilos personalizados e importação de fontes
├── dist/
│ └── output.css # CSS compilado pelo Tailwind (não editar)
├── img/ # Imagens estáticas do projeto
├── tailwind.config.js
└── package.json
Este projeto foi o meu terceiro desafio na Empresa Júnior GTI, onde o objetivo era dar um passo além dos projetos anteriores — que eram puramente HTML e CSS — e incorporar JavaScript e consumo de API externa pela primeira vez.
A escolha de usar a PokeAPI foi intencional: é uma API pública, bem documentada e com dados ricos o suficiente para exercitar fetch, async/await, manipulação de JSON e atualização dinâmica do DOM. O uso do TailwindCSS também foi uma novidade nesse desafio, substituindo o CSS manual dos projetos anteriores.
É um projeto de nível iniciante: não usa frameworks (React, Vue etc.), não tem testes e o escopo é limitado à primeira geração. Mas representa uma evolução real em relação ao que eu desenvolvia antes e faz parte do meu portfólio de aprendizado progressivo como desenvolvedor front-end.
Caio Vinícius — @CaioViniciusPF