Choose your pokemon

This project is about choosing your pokemon. The first thing you will see is a Pokeball; after tapping on the ball, we will get a list of pokemon to choose from. After selecting specific pokemon, it should display the abilities and weight of each pokemon. It is similar to what we see in cartoons, how Ash Ketchum/Misty/Brock brings out a random Pokeball and with a word of the pokemon's name and pokemon comes out of the Pokeball.

To build this project, the first thing JS will listen to is an event of DOMContentLoaded; once it's done, it will make an asynchronous fetch request to the local API to fetch the list of pokemon. After receiving a success promise, it will display the list of pokemon. As it's looping through the list of pokemon, it's making another asynchronous fetch request to pokemon API with each pokemon name to fetch the abilities and weight. After it's done collecting the data, it will render the data on the screen.

This project listens to several event listeners. One of the event listeners I will mention is the "mouseover," which listens when the user hovers over an image of pokemon. It replaces it with the currently selected image at the top of the screen. It displays the abilities and weight of the pokemon.

The other thing I would like to mention is how the abilities are being rendered; since we are making another asynchronous fetch request. I have added another function to loop over the list of abilities and return the string of abilities separated with a comma using the ternary operator.