Using the The RESTful Pokémon API (PokeAPI) the idea of this project was to build a tool similar to a "Pokédex", a device that holds a catalog and provides information regarding different species of Pokémon, featured in the popular anime series.
The approach taken here was to adap this tool to enable search by name, and filter by generation and species type through a delimited range of Pokémons. The Pokémons are displayed inside a card that includes an ID number and type information.
- HTML
- CSS
- JavaScript
The Pokédex by default displays a range that goes up to 908 Pokémons.
-
To find a particulat Pokémon card, use the search field at the top of the page by typing the Pokémon's name.
-
Once you start typying, the search will immeditaly start showing Pokémons with names that match the inital letters you are typing. Once you complete typing a name, the correct Pokémon will display.
-
When you are ready to move on, you can clear the field with backspace or clicking the reset button.
-
To filter per generation, click the button that matches the generation of Pokémons you want to see.
-
To filter per type, click the button that matches the species type you want to see on the screen.
-
If you click one category filter and then the other (e.g. generation first, and then type), you will see a subset of Pokémon filtered by both categories.
If you click only one category filter and not the other, then no combined filtering is done and only the one selected will remain.
-
Play around with the different filter combinations to see different subsets of Pokémons.
-
Use the reset button to restart and clear the last filter applied.
-
Pokémon data from The RESTful Pokémon API (PokeAPI)
-
Pokémon type icons from Bulbapedia
-
Background picture from Unsplash