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.
- 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
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
anddashboard
views
- 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
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
- File:
search.html
-
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.
-
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.
-
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" } } ...
-
WireFrame - Examples (This is just a reference. It's not neccesary implement the same design)
- File:
dashboard.html
-
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:
-
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.
-
-
Display important information in the cards.
- Name (Bulbasaur, Charizard, Pikachu)
- Type of Pokemon (Ghost, Poison, Fire)
- Image
-
WireFrame - Example (This is just a reference. It's not neccesary implement the same design)