so I'm trying to randomly generate a Pokemon and then five more Pokemon of the same type to display on a web page. So far, this is what I have:
const pokemonName = document.querySelector(".pokemon-name");
const pokemonImage = document.querySelector(".pokemon-image");
function getPokemon() {
const pokemonArr = []
const random = Math.floor(Math.random() * 256 + 1)
axios.get("https://pokeapi.co/api/v2/pokemon/1" + random)
.then(function (response) {
pokemonName.innerHTML = response.data.forms[0].name;
pokemonImage.src = response.data.sprites.front_default;
pokemonArr.push(pokemonName.innerHTML)
})
.catch(function (error) {
pokemonName.innerHTML = "An error has occurred.";
pokemonImage.src = "";
});
}
I've managed to display a Pokemon although it's still finnicky. My thought process was to append the name and image to an array or object but I'm having issues trying to apply that logic. This is my first time being introduced to the concept of APIs and using Axios. Would I be able to use a loop? How do I even go about comparing the types of Pokemon in the API?
Pokemon API: https://pokeapi.co/
https://replit.com/@heyitsmarcus/PokemonContainer#index.html
Above is a demo of the code explanation below.
If you want to fill with X amount of Pokemon on your page, you're on the right track to use classes. But, you need to utilize the querySelectorAll functionality to take advantage of your classes. This will allow you to run a for loop on the classes and pick a different pokemon for each matching selector. You really want to have a pokemon-container class, for example, that houses your pokemon-name and pokemon-image classes individually like so:
<div class="pokemon-container">
<div class="pokemon-name"></div>
<img class="pokemon-image" src="">
</div>
<div class="pokemon-container">
<div class="pokemon-name"></div>
<img class="pokemon-image" src="">
</div>
<div class="pokemon-container">
<div class="pokemon-name"></div>
<img class="pokemon-image" src="">
</div>
Repeat this for the number of pokemon you want to see. Then, you can run a for loop on the 3 pokemon-container classes to see 3 random pokemon while still using the same names you had before. The difference is, you just want to run a querySelector to grab the specific individual pokemon names and images for that container. This results in 3 random pokemon each time! =]
function getNewPokemon() {
//this loop grabs every pokemon container individually
const pokemonContainers = document.querySelectorAll('.pokemon-container');
for (const container of pokemonContainers) {
//Grab this specific container's pokemon name element
const pokemonName = container.querySelector('.pokemon-name');
//Grab this specific container's pokemon image element
const pokemonImage = container.querySelector('.pokemon-image');
//Get your random integer
const random = Math.floor(Math.random() * 256 + 1);
//also I removed the 1 from after the final slash because you're excluding pokemon by including that 1 in the URL
//and you can just use the natural JavaScript "fetch"
//there's really no need for a whole library for a request like this
axios.get(`https://pokeapi.co/api/v2/pokemon/${random}`)
.then(json => {
pokemonName.innerHTML = json.data.forms[0].name;
pokemonImage.src = json.data.sprites.front_default;
})
.catch(error => {
console.error('error in request', error);
pokemonName.innerHTML = "An error has occurred.";
pokemonImage.src = "";
})
}
}