web javascript typescript

Pokemon Pokedex shower

simple pokedex displayer in JS, HTML and CSS

⏱️ Time Breakdown

📋
Planning
~1 hours
💻
Coding
~2 hours
🧪
Testing
~1 hours

📊 Difficulty

easy

🎓 Learning Outcomes

  • Working with REST APIs
  • Managing application state
  • Creating responsive layouts

Pokemon Pokedex shower

In this project, we will be using the API at https://pokeapi.co/ to display the first generation of Pokemon. The display will show the Pokemon’s number, name, sprite/image, and type.

Project Checklist

  • Design and implement a web-based Pokemon Pokedex display using HTML, CSS, and JavaScript/TypeScript
  • Use Pokeapi to retrieve and display information about first generation of Pokemon
  • Test and debug display using sample data

Bonus Project Checklist Items

  • Implement pagination for Pokemon display
  • Allow for custom pagination limits

Inspiration (Any companies/libraries similar)

  • Pokemon API
  • Pokeapi.co
  • Pokedex

Hint/Code snippet to start

To get started, you can use the following code snippet to set up a basic Pokemon Pokedex display using JavaScript and the Pokeapi:

// Set the base URL for the Pokeapi
const baseUrl = 'https://pokeapi.co/api/v2'

// Function to get a list of Pokemon from the Pokeapi
async function getAllPokemon() {
  try {
    // Send a GET request to the Pokeapi to retrieve the list of Pokemon
    const response = await fetch(`${baseUrl}/pokemon`)
    const data = await response.json()

    // Return the list of Pokemon
    return data.results
  } catch (error) {
    console.error(error)
  }
}

Project Requirements

Progress Tracker 0 of 7 completed

Share Project