Recherche de Pokémon

Maintenant que tu maîtrises les bases de JavaScript, nous allons combiner tout ce que tu as appris pour créer un moteur de recherche de Pokémon ! Ce projet va te permettre de mettre en pratique :

1. L’écoute de l’événement de clic sur un bouton,
2. La récupération de la valeur du champ de texte dans une variable,
3. L’utilisation d’une API (PokéAPI),
4. La manipulation de l’objet renvoyé par l’API, contenant les données du Pokémon,
5. La modification du HTML pour afficher les résultats.

Entre le nom anglais d'un Pokémon.

Exemples : pikachu, charizard, bulbasaur

Rechercher

Découvrir PokéAPI

PokéAPI est une API gratuite qui fournit des informations sur tous les Pokémon. Pour récupérer les données d’un Pokémon, il suffit d’envoyer une requête à l’URL suivante, en changeant le nom du Pokémon :

https://pokeapi.co/api/v2/pokemon/pikachu

Récupérer l’entrée de l’utilisateur

Pour créer une recherche, nous avons besoin d’un champ de texte où l’utilisateur peut taper le nom du Pokémon, et d’un bouton pour lancer la recherche.

<input type="text" id="pokemon-input" placeholder="Nom du Pokémon" />
<button id="search-button">Rechercher</button>
<div id="result"></div>

En JavaScript, on peut récupérer la valeur du champ de texte avec la propriété value :

const input = document.getElementById("pokemon-input")
const button = document.getElementById("search-button")
const result = document.getElementById("result")

button.addEventListener("click", async () => {
  const pokemonName = input.value
  console.log("Recherche de : " + pokemonName)
})

Afficher les informations du Pokémon

Maintenant, utilisons la valeur saisie pour faire une requête à l’API et afficher les informations du Pokémon.

Afficher l’image du Pokémon

Les données du Pokémon contiennent également une image ! Elle se trouve dans pokemon.sprites.front_default. Ajoutons-la à notre affichage :

result.innerHTML =
  "<h3>" +
  pokemon.name +
  "</h3>" +
  '<img src="' +
  pokemon.sprites.front_default +
  '" />' +
  "<p>Poids : " +
  pokemon.weight +
  "</p>"

Félicitations ! Tu as créé ton premier projet JavaScript complet. Tu peux maintenant réutiliser ces connaissances pour créer d’autres projets : une application météo, un convertisseur de devises, un jeu de quiz… Les possibilités sont infinies ! 🎉