Capstone: Pokemon Explorer
Combine everything you've learned to build a Pokemon Explorer that fetches data from the PokeAPI and displays it with loading states and error handling.
Step 1 of 7
Project Overview: Pokemon Explorer
Time to put everything together! In this capstone, we'll build a Pokemon Explorer — a mini-app where the user types a Pokemon name, clicks Search, and sees the Pokemon's image, name, and types fetched from a real API.
This project uses every concept from the module:
- JSON — Parsing the API response
- Promises & async/await — Handling the asynchronous fetch
- fetch() — Making a real GET request to the PokeAPI
- Response checking — Handling 404 for invalid Pokemon names
- Error handling — try/catch for network and HTTP errors
- DOM rendering — Creating elements and displaying data
- Loading states — Showing feedback during the fetch
We'll use the PokeAPI (https://pokeapi.co/api/v2/pokemon/{name}) — a free, open API with data about every Pokemon. No API key needed!