Using Ajax and events to populate API data

Let's put it all together. For this lab, we're going to be creating a simplified Pokémon game using PokéAPI: https://pokeapi.co/.

Here's what our game will end up being: https://sleepy-anchorage-53323.herokuapp.com/. Go ahead and pull up the site and play around with it to see the functionality.

Please resist the temptation to look at the finished JavaScript file (for now).

Here's a screenshot of what you'll see when you access the preceding URL and start playing the game:

Figure 7.7 – Pokémon game

All of the HTML and CSS have been provided for you. You'll be working in the main.js file: https://github.com/PacktPublishing/Hands-on-JavaScript-for-Python-Developers/tree/master/chapter-7/pokeapi/starter-code.

If you're not familiar with Pokémon, don't worry! The logic behind this game is basic. (If you are familiar with the games, forgive the simplified approach.)

Here's...