Pokédex interativa construída com JavaScript puro, consumindo a PokéAPI para exibir e navegar por todos os 1.292 Pokémons.
Este é o Desafio 3 do programa de capacitação EngNet 2025.2, focado no aprendizado de consumo de APIs REST com JavaScript puro.
A aplicação é uma Pokédex que utiliza o serviço pokeapi.co para buscar dinamicamente os dados de todos os Pokémons. O usuário pode navegar pela lista completa usando os botões Anterior e Próximo, com navegação circular — ao chegar no primeiro Pokémon e clicar em "Anterior", a lista vai para o último, e vice-versa.
Desafio-3-2025.2-Backend/
│
├── assets/ # Imagens e arquivos de apoio
│ ├── screenshot.png # Print da interface principal
│ ├── screenshot2.png # Print secundário da interface
│ └── exemplo.md # Exemplo de resposta da PokéAPI
│
├── src/ # Código-fonte da aplicação
│ ├── index.html # Estrutura HTML da Pokédex
│ ├── style.css # Estilização da interface
│ └── index.js # Lógica JavaScript e consumo da API
│
└── README.md # Documentação do projeto
| Tela Principal | Navegação |
|---|---|
|
 |
- Exibição do nome e imagem do Pokémon atual
- Navegação para o Pokémon anterior e próximo
- Navegação circular (do primeiro para o último e vice-versa)
- Carregamento dinâmico de todos os 1.292 Pokémons via API
- (Extra opcional) Exibição de informações adicionais e interface aprimorada
A aplicação consome a PokéAPI — uma API pública e gratuita com dados completos sobre o universo Pokémon.
Lista de todos os Pokémons (com paginação):
GET https://pokeapi.co/api/v2/pokemon/?offset=0&limit=1292
Dados de um Pokémon específico (por nome ou número):
GET https://pokeapi.co/api/v2/pokemon/{nome_ou_numero}
Sprite (imagem) do Pokémon:
{
"sprites": {
"front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/{id}.png"
}
}O que é paginação? Os parâmetros
offsetelimitcontrolam quais registros a API retorna — ooffsetdefine a partir de qual item começar, e olimitdefine quantos retornar. Sem eles, a API retorna apenas 20 Pokémons por padrão.
| Conceito | Descrição |
|---|---|
| Fetch API | Função nativa do JavaScript para realizar requisições HTTP |
| Async / Await | Sintaxe para lidar com operações assíncronas de forma legível |
| Response.json() | Converte a resposta da API diretamente em objeto JavaScript |
| JSON.parse() | Converte uma string em formato JSON em objeto JavaScript |
| Paginação de API | Uso dos parâmetros offset e limit para buscar dados em lotes |
| Manipulação do DOM | Atualização dinâmica dos elementos da página com os dados da API |
- Mario Souto explicando Async e Await
- Documentação Async — W3Schools
- Documentação Async — MDN Mozilla
- Como usar o Fetch
- Documentação Fetch API — W3Schools
- Documentação Fetch API — MDN Mozilla
- Tutorial Fetch API — DevMedia
- Entendendo Response.json()
- Entendendo JSON.parse()
- Documentação JSON.parse() — W3Schools
- Documentação Response.json() — MDN Mozilla
| Extensão | Descrição |
|---|---|
| Live Server | Recarrega o browser automaticamente ao salvar o arquivo |
- Realize um fork deste repositório para sua conta pessoal no GitHub
- Implemente as funcionalidades e faça um commit com as alterações
- Crie uma release no seu repositório com o projeto finalizado
- Envie o
.zipda release para o Google Classroom - Não exclua o repositório nem a release após a entrega — o uso do GitHub será avaliado
A EngNet disponibiliza o ZillaGPT, uma ferramenta personalizada de IA para auxiliar no aprendizado técnico de JavaScript durante a capacitação.
🔗 https://zillagpt.engnetconsultoria.com.br/
Em caso de dúvidas, você também pode usar o canal do Slack da capacitação ou contatar um membro do seu squad.
Que tal ir além? Complemente sua Pokédex com:
- Exibição de tipo, altura, peso e habilidades do Pokémon
- Barra de estatísticas (HP, Ataque, Defesa, etc.)
- Interface mais elaborada e visualmente atraente
- Animações de transição entre Pokémons
Feito com <3 como parte do programa de capacitação EngNet 2025.2