As I began my journey into the coding landscape, I arrived at the point where I would create my first project. After looking through various APIs, I was informed of the PokeAPI. I love Pokemon, so when I saw the PokeAPI, I instantly knew I wanted to use it as well as how I wanted to use it. I have always wanted to build some sort of Pokemon randomizer after seeing many play throughs of Pokemon Randomizer Nuzlockes on youtube. I now had my vision as well as the resources and knowledge I needed to build it.
First thing I needed of course was a randomizer. Luckily getting a Pokemon was simple, I just had to get the url and select the id at the end of it to get a Pokemon. Since all the id’s are integers I had to have a function that could give me a random number as an integer. I used a function
that was available at MDN, which is a really helpful resource in general, to create my random integers. I attached that function at the end of my fetch url passing in 1 and 809 as my arguments. This allowed me to get random Pokemon from generation 1 to generation 8.
function randomId(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min) + min);
}
function getRandomPokemon() {
fetch(https://pokeapi.co/api/v2/pokemon/${randomId(1,809)})
.then(resp => resp.json())
.then(pokemon => renderPokemonCard(pokemon))
}
As for what information from the API I wanted to include on the page, the name and image of the Pokemon was obvious. However I thought there was so much more information available to me that would help someone if they did not know some of the Pokemon introduced in later generations. I decided to grab the pokedex number, as well as their typing. Therefore, I created a renderPokemonCard function which would take a Pokemon object as its argument. The renderPokemonCard function would then create html elements for the pokemon’s name, official artwork, pokedex number, and its types. I also added a heart button so that someone could “like” the pokemon if it was one of their favorites. Afterwards, that content would be the html content of the pokemonDiv that was created. Lastly the pokemonDiv would be appended to the pokemonContainer.
In order to render the Pokemon on the page, I created a function called getRandomPokemon which would make the fetch call, convert the information to a JSON object and pass it to my renderPokemonCard as an argument.
It was all looking great, however I could not attach an event listener to the heart button. This was because the cards were being created dynamically. I would get an error when I tried grabbing the element before it was rendered on the page. In order to solve this issue, I used event delegation to target the heart button. By using event delegation I was able to attach the event listener to the parent div that was already created. This allowed me to then create my callback function, which would run only when the element matched the condition I had created. Another added benefit of using event delegation was not having to write out code for every heart button that could potentially be rendered.
function renderPokemonCard(pokemon) {
const pokemonDiv = document.createElement("div");
const pokemonCard = `
${pokemon.name[0].toUpperCase() + pokemon.name.slice(1)}
favorite
#${pokemon.id.toString().padStart(3, "0")}
${pokemonTypes(pokemon.types)}
`
pokemonDiv.innerHTML = pokemonCard;
pokemonDiv.addEventListener("mouseover", highlightCard);
pokemonDiv.addEventListener("mouseout", normalizeCard);
pokemonDiv.addEventListener("click", getHeartButton);
pokemonContainer.appendChild(pokemonDiv);
}
To wrap it all up, the last thing I wanted to do was to highlight the card if a user hovered over it. To do this I attached an event listener to the pokemonDiv and used event delegation to target the card and changed its color to a light yellow.
function highlightCard(e) {
if (e.target.matches(".card")) {
e.target.style.backgroundColor = "lightyellow";
}
}
function normalizeCard(e) {
if (e.target.matches(".card")) {
e.target.style.backgroundColor = "";
}
}
Creating this randomizer was such a fun way to really put what I have learned so far to the test. There were moments where I needed to stop myself and refocus because I wanted to add more. I’m sure I’ll go back to this project and update it with all the knowledge I gain as I dive deeper into coding. The journey has only just begun and it’s one I’m sure glad I have decided to take.
Top comments (0)