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!