This project is an assignment for the course Web App From Scratch. The goal of this course is to create a web application from scratch, without the use of frameworks or libraries. The project is built using vanilla HTML, CSS and JavaScript.
The concept of the application is a trainer overview. It fetches trainer data (my data) from a JSON file and displays it. It also fetches 6 random pokemon from the PokeAPI and displays them as my current team. Below that, there's a pokedex section where you can fetch all pokemon from the PokeAPI and display them in a paginated grid. The user can also decide how many pokemon to display per page.
- Fetches data from a JSON file and the PokeAPI
- Skeleton loaders
- Responsive design
- Persisted pagination through query parameters in the URL
- Error states when data can't be fetched (with retry option)
- Error states when JavaScript is disabled
I wanted to add pagination to the application, so I made a previous and next button to increase/decrease the current page. I added listeners that would update the disabled state of the buttons:
This didn't work. The previous button kept being disabled...
Eventually I figured out that I was only updating the previous button state when clicking the previous button and I should update both buttons when either button is clicked. I rewrote the code to the following:
Another bug I encountered was when I tried to go to the very last page. The following was displayed:
This was because I expected to get the same number of pokemon as the perPage variable that I use, but this is not the case for the last page. I fixed it by removing all remaining loading cards after all pokemon were loaded.
