Solutions - Pokemon JavaScript Catch

Revenir à l'exercice : Pokemon JavaScript Catch

1. Sélectionner Pikachu avec getElementById()

Pour sélectionner Pikachu dans le DOM, on utilise la méthode getElementById(), qui renvoie l'élément HTML ayant l'ID pikachu.

document.getElementById('pikachu');

2. Sélectionner tous les Pokémon de type Eau avec querySelectorAll()

Pour sélectionner tous les Pokémon de type Eau, on utilise querySelectorAll() avec le sélecteur de classe .type-eau. Cette méthode renvoie un tableau, une NodeList pour être plus précis, contenant tous les éléments correspondant à ce sélecteur :

document.querySelectorAll('.type-eau');

3. Sélectionner Lokhlass avec querySelector() et changer sa couleur de fond en blanc

La méthode querySelector() permet de sélectionner un élément en utilisant des sélecteurs CSS. Ici, on sélectionne Lokhlass par son ID lokhlass et on change sa couleur de fond à l'aide de la propriété style.backgroundColor :

let lokhlass = document.querySelector('#lokhlass');
lokhlass.style.backgroundColor = 'white';

4. Sélectionner tous les titres <h2> des Pokémon et changer leur contenu par "Pika Pika"

Pour modifier le texte de tous les titres <h2> des cartes Pokémon, on sélectionne chaque titre à l'intérieur des cartes Pokémon en utilisant querySelectorAll(). Ensuite, on utilise une boucle for...of pour remplacer le texte par "Pika Pika" :

let h2Pokemons  = document.querySelectorAll('.pokemon h2');

for (h2 of h2Pokemons) {
    h2.textContent = 'Pika Pika';
}

5. Supprimer tous les paragraphes <p> des cartes Pokémon

Pour supprimer tous les éléments <p> contenus dans les cartes Pokémon, on les sélectionne avec querySelectorAll() et on les parcourt avec for...of pour les retirer du DOM en utilisant remove() :

let paraPokemons = document.querySelectorAll('.pokemon p');

for (para of paraPokemons) {
    para.remove()
};

6. Ajouter Raichu de type Électrique

Pour ajouter une carte Pokémon pour Raichu, on créer le code HTML de la carte et on la stoque dans une variable. Il ne faut pas oublier d'ajouter les classes pokemon et type-electrique. Enfin, on l'ajoute à la fin += du code HTML existant .innerHTML de l'élément .pokemon-container que l'on récupère avec un sélecteur querySelector().

let raichu = `
    <div class="pokemon type-electrique" id="raichu">
        <img src="./images/raichu.png" alt="Raichu">
        <h2 class="pokemon-name">Raichu</h2>
        <p class="description">Électrique</p>
    </div>
`;

document.querySelector('.pokemon-container').innerHTML += raichu;