Building Pokemon Index in Vanilla JS

Photo by Fernando Hernandez on Unsplash

In this post, we are going to build a pokemon index using Pokemon API in plain Javascript. First, let’s discuss what this project is about, there will be a search bar where users can come and search for a pokemon and after the search, pokemon with its image and stats, as a result, will be shown. So, the functionality is pretty basic but you using this project as a base can tweak and make your own version of this project and add it to your portfolio.

The full version is deployed at https://poke-mon.now.sh/

This project is inspired by Chris on Code

HTML Structure

Before we dive into javascript, we first have to code some HTML, just to structure our project. So let’s do that

Its just a simple HTML file with an empty div with class pokemon-container and above it is a form with a search bar and a button, Nothing fancy. We will use the empty div to display our pokemon data from our javascript file.

Some Styling