See GitHub Repository
See Live Preview

This project is part of my first Module with Code Academy Berlin. The goal is to become comfortable using Vanilla JavaScript and DOM manipulation. The project specs were to create a webpage dynamically populated by fetching data from an API. We should add filters and/or a sorting menu that a visitor can then use to interact with the data.

I chose to use the very popular Pokémon API. I make an initial fetch to get the names of the first 1154 pokémon which I then use to generate a <datalist>. My intention was to mimic suggestive search results for visitors that perhaps don't know the names of any specific pokémon.

Clicking "more" will provide access to a shuffle function, which will choose up to 5 random pokémon from the current active list. A "type" filter will limit results from both the search and shuffle to the selected type/s (the secondary select element is only populated after an initial type has already been selected.)

Clicking the resulting pokémon card will open a model with more information. Filter options are available for the Moves table and Sprites display within the model.

This project taught me the basics of JavaScript and how to use it to add interactivity to a web page. A particular challenge was to take the values from multiple inputs and combine them to filter my data. I learned about JavaScript's call stack and event loop, as well as how to use promises for asynchronous functionality, including the fetch() API for making calls to an external API.