The Home page is the first page you access. It is used as a Pokedex where you can navigate throughout all Pokémon Species with an Offset and a card Limit used as URL Parameters. There is a Previous and a Next button to navigate throught the Pokémons and a Search Bar.
- Add Style to the Search Bar.
- Add Style to the Limit Selector.
- Add Style to the Pagination indicator.
- Add Style to the Buttons.
- Make each Pokemon Type Box have it's own CSS Class based on it's type (ie. Fire -> type-fire) and Display a background color related to the type for better UX.
- Make all Cards in the container the same size.
- Work on media queries for a better mobile UX.
- Make a toggle to see the same page but with all sprites with the Shiny version every Pokémon.
The information page is accessible by clicking on a card, the card has an onClick function redirecting the the details.html file with an URL Parameter giving the details.js script the ID of the Pokémon we're displaying informations on.
- Display all evolutions with level and / or conditions (items, level of hapiness ect...) needed.
- Display all the TMs and HMs the Pokémon can learn.
- Display all the forms of this Pokémon.
- Display all stats of the Pokémon with a cursor to see the stats at the pointed level.
- Make a toggle to see the same page but with all sprites with the Shiny version of the Pokémon.
- Hide API Calls on the 'Network' tab of web browsers.
- Create multiple tests for each feature.
- Optimize API Calls Count on homepage.
Currently 1 call is made at the start of the script to get all the Pokemons and 2 calls are made for every pokemon one for the informations on the species and one for the informations on the default form and a final call for the sprite of the pokemon.
- Improve cards loading to be more fluid and not take 2 seconds to load everytime.
- Refactor code with try / catch statements.
- Refactor Cards using Web Component's Custom Elements.
- Refactor each component into separate files and not one big file.