Create a PokeDex with Vanilla JS
In this project, we are going to create a PokeDex with Vanilla JavaScript.
We will first create a PokeDex folder and three files index.html, styles.css and main.js inside it.
After that we are going to open the code in VS Code and add the basic html in index.html, with only a header. We are also starting the project with the VS Code extension Live Server.
After that let’s add the basic style in styles.css file.
Now, head back to the index.html and add a div for the pokemon and also include the main.js file.
In main.js we are first selecting the poke_container and creating a function getPokemon(), which uses fetch to call the pokemon API.
For testing purpose, we are passing 1 to it and console logging the data. We are getting the data for the pokemon correctly in the console.
Now, we are creating a function fetchPokemon(), where we are looping through a for loop. We are calling the function getPokemon() from inside it with the id from 1 to 150.
Now, we will create a new function createPokemonCard(). Inside it, we are creating a new div with class pokemon. We are just showing the name now and it is showing perfectly.
We are now completing the pokeInnerHTML and showing the image, id, name, and type. We had also added the required html.
Now, we only need to style our pokemon. So, head over to styles.css and make the poke-container a flexbox. We are also adding styles for pokemon class.
After this we are completing the css by adding styles for img-container, info, number and name.
Our little project is complete. You can find the code for the same here.
