{{announcement.body}}
{{announcement.title}}

Building Pokemon Index in Vanilla JS

DZone 's Guide to

Building Pokemon Index in Vanilla JS

In this post, we are going to build a Pokemon index using Pokemon API in vanilla Javascript from scratch. Full Version is deployed at https://poke-mon.now.sh/.

· Web Dev Zone ·
Free Resource

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

HTML


It's 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

The webpage looks too plain as of now so let’s just style it a bit. Let’s create a style.css file and link it to our index.html

CSS

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

Javascript

So let's code some JavaScript now. We will start with an empty index.js file and discuss what are the steps needed.

  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.

JavaScript


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

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

JavaScript


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

JavaScript


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 follows:

JavaScript


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.

JavaScript


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 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:

JSON

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
JavaScript


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,

JavaScript


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.

JavaScript


The output of the above will be as follows,

JavaScript

You can also show moves of the Pokemon, as follows:
JavaScript


The output of the above is shown below

JavaScript

Complete index.js file is as follows. As you can see here,  getPokemon()

JavaScript

is also called in the end, just to show the default Pokemon, which is Bulbasaur.

GitHub Repository

lelouchB/poke.mon

Deployed at https://poke-mon.now.sh/

Poke.mon

poke-mon.now.sh


Your Versions

Following are a few ideas that can be done to this existing project to make it more interesting, you can use these to make your own version of the project

  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.

Topics:
api, coding, javascript, javascript api, programming, technology, tutorial

Published at DZone with permission of Ashutosh Singh , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}