Build your own Pokedex v2 - API calls - JS Advanced

In this project, you'll build a pokedex.In Pokemon lore, the Pokedex is a Pokemon dictionary that the characters carry with them. In this device, they can query the Pokemons and learn details about them, such as, abilities, type of Pokemon, strengths and weaknesses. Students are encouraged to take examples online and implement them.

Main goals

• DOM manipulation with JS
• Obtain information from third-party REST API
• Work with HTTP protocol using Fetch API
• Learn asynchronous programming
• Improve your knowledge on ES6/Advanced JS
• Proper use of HTML5, CSS3/SASS. Mobile-first
• README.md: Document your applications
• Proper use of Git/GitHub and branches from the beginning: main, develop, feature_1, feature_2, etc...
• Not allowed to use frameworks or external libraries
• Structure a web project in a clear and orderly manner

General analysis

Create a website capable of:

• Search a pokemon by ID/name
• Create a general pokemon dashboard
• Display information of each pokemon in cards
• Navigate between search and dashboard views

HTML + CSS/SASS

• Use CSS3/SASS techniques that you've learned during the course
• Mobile-first
• You can adapt/reuse some parts of the previous pokedex that you've made during the course or start from scratch. Here the previous instructions: pokedex | basic JS

JavaScript

You'll practice ES6/AdvancedJS methods that you've learned during the course.

File: script.js

You'll use PokeAPI to GET all the information to complete the exercise

PokeAPI -> API Docs

Exercise JS 1 - Searching a pokemon

• File: search.html

1. Develop a search field where users will search for Pokemon’s name or id.

   • Create input + button to search.
   • Add a callback to the button event listener.

2. Make a request by Pokemon ID or name. PokeApi already can handle both.

   • There are some Pokemons that don’t exist but should, 999 doesn’t exist but 1000 does.

3. Display important information in the card. All this information is available on the first REST call to the API.

   • Name (Bulbasaur, Charizard, Pikachu)
   • Skills (Lighting-rod, static)
   • Type of Pokemon (Ghost, Poison, Fire)
   • Image (sprites)

    ...
    other:{
    dream_world{
        front_default:"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/132.svg"
        front_female:null
        front_default:"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/132.png"
    },
    official-artwork{
        front_default:"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/132.png"
    }
    }
    ...

4. WireFrame - Examples (This is just a reference. It's not neccesary implement the same design)

   Search

   

   Cards

   

Exercise JS 2 - Pokemon dashboard

• File: dashboard.html

1. Fetch 20 pokemons and paint them on the screen. You'll have to make a nested Fetch

   • Step 1: Fetch (HTTP GET) the list of first 30 pokemon.

     GET https://pokeapi.co/api/v2/pokemon?limit=20&offset=0

   • Step 2: You'll need to iterate over the previous object obtained to make another fetch (HTTP GET). Examples:

     • Bulbasaur | GET https://pokeapi.co/api/v2/pokemon/1
     • Charmander | GET https://pokeapi.co/api/v2/pokemon/4
     • Squirtle | GET https://pokeapi.co/api/v2/pokemon/7

   • Important: To make the nested fetch (HTTP GET) you'll need to iterate and transform data obtained on the original array, think about map() array method. You can also use another kind of iteration.

2. Display important information in the cards.

   • Name (Bulbasaur, Charizard, Pikachu)
   • Type of Pokemon (Ghost, Poison, Fire)
   • Image

3. WireFrame - Example (This is just a reference. It's not neccesary implement the same design)

   

Useful tutorials

• fetching-them-all-poke-api