Skip to content

IshNjie/Pokedex

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pokedex - with PokeAPI

Having fun with the PokeAPI - A script that allows the user to retrieve a Pokedex-like entry for a Pokemon. Data supports Pokemon from Gen 1 to Gen 8, including Pokemon from the Sword and Shield DLC

This was done using both Python and Javascipt with a few variations.

Navigate the two projects:

  1. Python
  2. JS

If you want to see the Webpage in action:

  • Install the Live Server extension in VSCode
  • Download the repo and navigate to the home.html file
  • Right click and Open with Live Server

🐍 Python

How we did it

  1. Navigate to PokeAPI page and go to the API v2 Tab. The documentation will have many endpoints, from Berries to Evolution chain.

  • Call the getPokemon method to get a Pokedex entry for a given Pokemon Dex number or Pokemon name

    entry = dex.getPokemon('Mewtwo')
    
    output: 
    
    #150
    Mewtwo
    Single Type Psychic Pokemon
    Ability: 1. Pressure
    Hidden Ability: Unnerve
    Native Generation: Kanto
    

    Nothing is currently returned from this function, just printed.

  • Call the getStats method to get a full list of Pokemon with they types and sum of their base stats. The user can also filter down to what Primary type they want by setting a PokeType as an argument

    waterType = dex.getStats('Water')
    

💻 JavaScript

How we did it

Home

  1. Navigate to PokeAPI page and go to the API v2 Tab. The documentation will have many endpoints, from Berries to Evolution chain.

  2. Create a function getPokemon to retrieve one pokemon from the API

    const getPokemon = async id => {
      const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
      const result = await fetch(url);
      const pokemon = await result.json();
      console.log(pokemon)
      createPokeCard(pokemon);
    }
    
    
  • This async function allows us to interact with the API and simultaneously complete other tasks like rendering web pages etc. The await key word will pause the execution and evaluate the value brought back.
  1. Create a function fetchPokemon to iterate through all numbers to bring back multiple repsonses

    const fetchPokemon = async() => {
    
      for (let i =1; i <= pokemon_number; i++){
          await getPokemon(i);
          }
    };
    
  • This function will use a for loop to iterate until the max pokemon_number is brought back
  1. Create a function createPokeCard to take the json response, parse it and assign values to appropriate variables. The innerHTML method allows us to set HTML content for an element in JS.

home screen

PokeDex Search

  1. Create a function performSearch that is call the getPokemon function once the search button is clicked

search

About

Using the RESTful Pokemon API - PokeAPI

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published