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
Vous n’avez qu’à écrire du JavaScript (nul besoin de modifier le HTML ou le CSS).
Pour les consignes qui commencent par (*⚠️*), vous aurez probablement besoin de précisions de votre enseignante. En classe, faites-lui signe si vous voulez avoir une aide supplémentaire pour ces dites consignes.
Requis
Créez-vous une fonction gérant l'affichage du Pokémon.
Lorsque le menu déroulant change de valeur, appelez votre fonction. Trouvez un moyen d'envoyer à votre fonction la valeur sélectionnée dans le menu déroulant. Par exemple: "grass".
Dans votre fonction, retirez la classe .reveal du body, effacez le texte à l'intérieur de la balise .name.
(*⚠️*) Toujours dans votre fonction à la suite du point précédent, appelez PokéAPI afin d'obtenir la liste des Pokémons correspondant au type reçu du menu déroulant.
(*⚠️*) Faites un console log du résultat reçu afin de vous assurer qu'il retourne bien un objet contenant des propriétés relatives au type de Pokémon sélectionné.
(*⚠️*) 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çus. Basez-vous sur ce nombre afin d'en piger un aléatoirement.
Faites un console log du Pokémon pigé afin de voir les propriétés que contient son objet.
À 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.
Faites un console log du résultat. Vous devriez obtenir un objet JavaScript décrivant en détail le Pokémon sélectionné.
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
Insérez l'image de son sprite par défaut dans l'élément avec la classe .media 🌄.
Bonus
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'afficher le bon sprite.
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 📚
Fetch API
L'API Fetch: interface pour récupération de ressources à travers le réseau
boucle forEach()
Facilite l'analyse ou le traitement des éléments d'un tableau/NodeList
addEventListener
Méthode permettant d'attacher un gestionnaire d'événement à un élément du DOM.
classList
Permet de manipuler les classes CSS d'un élément.
Math.random
Accéder au propriété d'un objet JS