Fetch - Poké API

Pour cet exercice nous allons créez un microsite permettant de déterminer quel Pokémon parmi 1118 choisirait l’usager de façon ludique. Pour ce faire nous aurons recours à fetch au service de PokéAPI.

Aperçu du résultat 👇

Matériel

Pen de départ 

Requis

  1. Créez-vous une fonction gérant l'affichage du Pokémon.

  2. Lorsque le menu déroulant change de valeur, appelez votre fonction et passez-lui en paramètre la valeur du dit menu déroulant. Par exemple: "grass".

  3. Dans votre fonction, retirez la classe .reveal du <body>, effacez le texte à l'intérieur de la balise .name et appelez PokéAPI afin d'obtenir la liste des Pokémons correspondant au type reçu en paramètre.

  4. Faites un console log du résultat reçu afin de vous assurez qu'il retourne bien un objet contenant des propriétés relatives au type de Pokémon sélectionné.

  5. Si le résultat de l'état précédent est bon, plutôt que d'effectuer un console log dans l'étape précédente, déterminez le nombre de Pokémons reçu et basez-vous sur ce nombre afin d'en piger un aléatoirement.

  6. Faites un console log du Pokémon pigé afin de voir les propriétés que contient son objet.

  7. À partir du Pokémon sélectionné, appelez à nouveau PokéAPI, mais cette fois utilisez l'URL fournie dans l'objet du Pokémon sélectionné lors de l'étape précédente.

  8. Faites un console log du résultat. Vous devriez obtenir un objet JavaScript décrivant en détail le Pokémon sélectionné.

  9. Ajoutez la classe .reveal au <body> (déclenche l'ouverture de la pokéball), insérez le nom de votre Pokémon dans la balise avec la classe .name et l'image de son sprite par défaut dans l'élément avec la classe .media 🌄.

Bonus

  1. Ajoutez un menu déroulant supplémentaire laissant le choix du genre à l'usager (masculin/féminin). Basez-vous ensuite sur cette information afin d'affichez le bon sprite.

  2. Ajoutez un troisième menu déroulant supplémentaire permettant le choix entre les options "Par défaut" et "Shiny". Combinez ce choix à celui du genre afin d'afficher le sprite correspondant du Pokémon.

Notes de cours 📚