Building Pokemon Index in Vanilla JS
Join the DZone community and get the full member experience.Join For Free
The full version is deployed at https://poke-mon.now.sh/.
This project is inspired by Chris on Code.
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.js file and discuss what are the steps needed.
- Grab the things we need from HTML in index.js.
- Take input from the search bar and use that to make API requests.
- Make requests to the Pokemon API and fetch the data.
- 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.
We can use
getElementByClass() here it makes no difference.
Now, we will add event listeners to listen to the submit command
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
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:
We created a div element using
document.createElement() and then gave it a class of
We will first show the image of the Pokemon. For that we will use
appendChild() to put the information or data on the web page.
And remember we are doing all this inside
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
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
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:
We made another div inside
innerHTML and gave it a class
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
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.
The output of the above will be as follows,
The output of the above is shown below
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
- 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.
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.
Published at DZone with permission of Ashutosh Singh, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.