Resolved: How to change the color of a class based on data your recieving?

Question:

Ok so I am working on a Random Pokémon Generator and every time the user clicks the generate button it picks a random number between 1-905(Number of Pokémon in National Dex). I am able to show the image, name/id, and typing of the Pokémon that is generated. What im stuck on is how to change the color of the background of the container/class that the Pokémon is displayed in based on the typing of said Pokémon. Say the Pokémon’s typing is grass I would want the background to be a green color. I really don’t know where to start to even do this.
I am using PokeApi

const pokemongenerated = document.getElementById('pokemongenerated');

const fetchPokemon = () => {
const array = [];
const randomID = Math.floor(Math.random() * 906) + 1;


    const url = `https://pokeapi.co/api/v2/pokemon/${randomID}`;
    array.push(fetch(url).then((res) => res.json()));

Promise.all(array).then((results) => {
     const pokemon = results.map((data) => ({
        name: data.name,
        image: data.sprites['front_default'],
        type: data.types.map((type) => type.type.name).join(', '),
        id: data.id,
        
       

    }));
    displayPokemon(pokemon);
  });
 };
const displayPokemon = (pokemon) => {
console.log(pokemon);
const pokemonHTMLString = pokemon
    .map(
        (pokemon) => `
    <ul class="card">
        <img decoding="async" class="card-image" src="${pokemon.image}"/>
        <h2 class="card-name"> ${pokemon.id}. ${pokemon.name}</h2>
        <p class="card-type">Type: ${pokemon.type}</p>

    </ul>
`
    )
    .join('');

pokemonGenerated.innerHTML = pokemonHTMLString;
};

fetchPokemon();

Answer:

1.Create a typeCss on object 2.Make css styles for all type

const pokemongenerated = document.getElementById('pokemongenerated');

const fetchPokemon = () => {
const array = [];
const randomID = Math.floor(Math.random() * 906) + 1;


    const url = `https://pokeapi.co/api/v2/pokemon/${randomID}`;
    array.push(fetch(url).then((res) => res.json()));

Promise.all(array).then((results) => {
     const pokemon = results.map((data) => ({
        name: data.name,
        image: data.sprites['front_default'],
        type: data.types.map((type) => type.type.name).join(', '),
        typeCss: data.types.map((type)=>type.type.name).join('--'),
        id: data.id,
        
       

    }));
    displayPokemon(pokemon);
  });
 };
const displayPokemon = (pokemon) => {
console.log(pokemon);
const pokemonHTMLString = pokemon
    .map(
        (pokemon) => `
    <ul class="card pokemon-type type-${pokemon.typeCss}">
        <img decoding="async" class="card-image" src="${pokemon.image}"/>
        <h2 class="card-name"> ${pokemon.id}. ${pokemon.name}</h2>
        <p class="card-type">Type: ${pokemon.type}</p>

    </ul>
`
    )
    .join('');

document.querySelector('#pokemonGenerated').innerHTML = pokemonHTMLString;
};

fetchPokemon();

.pokemon-type[class*="water"]{
background:blue;
}
.pokemon-type[class*="grass"]{
background:green;
}

//so on

<div id="pokemonGenerated"></div>

If you have better answer, please add a comment about this, thank you!

Resolved: How to change the color of a class based on data your recieving?

Resolved: Passing 2 functions in onChange in react

Resolved: Why doesn’t stringstream consume output during hex formatting?

Resolved: CMake path for python3 libraries doesn’t change (windows 10)

Leave A Reply