Building Pokemon Index in Vanilla JS

Ashutosh K Singh
May 18, 2020 · 6 min read
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

index.html

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

It will take another post just to discuss the CSS, so let’s move on to the javascript side of things.

Javascript

  1. Grab the things we need from HTML in index.js.
  2. Take input from the search bar and use that to make API requests.
  3. Make requests to the pokemon API and fetch the data.
  4. Display the data on the webpage.

Okay, these will be the steps, sounds simple, doesn’t it.

The first step is to get all the div’s, form, etc, from HTML file which is done as follows.

// grab the things we need ----------const pokemonContainer = document.querySelector(".pokemon-container");
const formEl = document.querySelector("form");
const inputEl = document.querySelector("input[type=text]");

We can use getElementById() or getElementByClass() here it makes no difference.

Now, we will add event listeners to listen to the submit command

// listen for user events -------------formEl.addEventListener("submit", (e) => {
e.preventDefault();
pokemonContainer.innerHTML = "";
getPokemon(inputEl.value);
});

Here we use e.preventDefault() to stop the page from refreshing. Then we clear the div with class pokemonContainer although it is empty for now, in the future, we may search multiple times and each time we would have to clear the div which is still holding the previous information. Next is getPokemon() method in which the search input is passed as an argument. This function will do everything from making requests to the API and to displaying it to the page. So let’s discuss this function.

The third step is to make requests to the pokemon API which is

https://pokeapi.co/api/v2/pokemon/+ id

We will be making an async function here as follows

async function getPokemon(name = "bulbasaur") {const res= await fetch(`https://pokeapi.co/api/v2/pokemon/${name}`);
const pokemon = await res.json();
}

This is a simple async function, named getPokemon() in which API requests are made using fetch and stored in res variable which is further converted to JSON using json(). In addition to users being able to search for the pokemon, by adding name = bulbasaur in parameters, we can show a default pokemon, even before a search is initiated. Another thing that I want to discuss here is that only lowercase pokemon names are considered valid, so keep that in mind when making requests. Optionally you can add a method or function to convert user input into lower case.

Now, that we have stored the pokemon information into res, let’s take a look at a traditional response of the API.

Since the response JSON is too big to show here, you can go to https://pokeapi.co/ and view the raw file.

We have the information on the pokemon so let’s show it, we will start by creating a different div for showing the information as follow

const pokemonEl = document.createElement("div");
pokemonEl.classList.add("pokemon");

We created a div element using document.createElement() and then gave it a class of pokemon using classList.add() .

We will first show the image of the pokemon, for that we will use .innerHTML and appendChild() to put the information or data on the web page.

And remember we are doing all this inside getPokemon() function.

pokemonEl.innerHTML = `<div class="info">
<img src="https://pokeres.bastionbot.org/images/pokemon/${
pokemon.id}.png" width="200">
<h2>${pokemon.name}</h2>
</div>
`
pokemonContainer.appendChild(pokemonEl);

We used the innerHTML on pokemonEl and then used Template Literals to add HTML. We added a div with class info, and basically, the next steps are just figuring out where in the JSON are the information that you need and want to show on your application, the response files are large so you have to be selective as to how much information and what information do you want to show. As for the image of the pokemon, you can access all of them just by changing the id in https://pokeres.bastionbot.org/images/pokemon/${
pokemon.id}.png
. Then we display the name of the pokemon in <h2> .The last step in this is to append the div on to the webpage to actually show the information which is done using pokemonContainer.appendChild(pokemonEl)

By now, we can show the name and image of the pokemon, but there are tons of information we can display, so let’s go on with.

We will first display stats of the pokemon, by accessing the stats from the response using pokemon.stats but first look at the raw JSON of stats. Below are the stats of Bulbasaur

So, now we have to decide what all we want to display. It’s entirely up to you, you can display everything or nothing. Here we will display the name of the stat and its numeric value that is base_stat

<div class="stats">${pokemon.stats
.map((stat) => {
return `<p>${stat.stat.name}: ${stat.base_stat}</p>`;
}).join("")}
</div>

We made another div inside innerHTML and gave it a class stats.

As you can see above in the raw JSON, the stats actually contains an array of objects, so to access that and to just display the name and base_stat. For that, we use map() method on the stat array, what map() does that it takes every element of the array one by one in this case objects and creates a new array with the results of calling a function for every array element. Or in simple words, the map() method calls the provided function once for each element in an array, in order. That function, in this case, is a callback that takes stat as an argument and returns a paragraph <p> that holds the name and base_stat using Template Literals. The whole array is later converted into a string using join() method.

Now, let’s take a look at the output of the above code,

Before proceeding further let’s show different information using the same logic as above, let’s show the abilities of the pokemon, this time there is no numeric value to be shown, other than that the code remains almost same.

<div class="abilities">${pokemon.abilities
.map((ability) => {
return `<p>${ability.ability.name}</p>`;
})
.join("")}
<div>

The output of the above will be as follows,

You can also show moves of the pokemon as follow,

<div class="moves">
${pokemon.moves
.map((move) => {
return `${move.move.name} `;
})
.join("")}
<div>

The output of the above is shown below

Complete index.js file is as follows

As you can see here, getPokemon() is also called in the end, just to show the default pokemon which is Bulbasaur.

Your Versions

  1. Screenshot Feature

You can add a screenshot feature in this project so that users can take a screenshot of the pokemon information.

2. Displaying additional information

As you have seen in the raw JSON, many of the moves and abilities contain a URL that has additional in-depth information about moves or abilities. You can show that information on the web page.

3. Fight

A really amazing option, user can search and select two pokemon, images displaying at opposite sides of the webpages, and then click on a fight button, then they will come close suing some animations or CSS, and then finally the pokemon with higher stats wins and a WIN message is shown.

The Startup

Get smarter at building your thing. Join The Startup’s +794K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Ashutosh K Singh

Written by

Writer, Learner, JavaScript Developer, working on https://finalspaceapi.com

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +794K followers.

Ashutosh K Singh

Written by

Writer, Learner, JavaScript Developer, working on https://finalspaceapi.com

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +794K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app