PRÉSENTATION DU COURS

Projet - Pokemon search

Recherche de pokemon sur la pokeapi

Pokemon Searchs

Le but de ce projet est de construire une petite interface permetant aux utilisateurs de rechercher des pokemons et avoir des informations sur eux (En anglais car l'api est en anglais)

Le projet va intégrer une librairie de carousel : Slick carroussel

Api pokemon : https://pokeapi.co/?ref=public-apis

Consignes

Réalisez une page permettant de faire les choses suivantes :

  • Avoir un titre expliquant le but de la page
  • Un espace vide pour accueillir les information du pokemon que vous allez chercher
  • Un champ de recherche pour rechercher vos pokemons
  • Un carousel fait avec slick pour afficher les différents sprites du pokémons

PRO TIP: Utilisez code sandbox pour faire les exercices sans vous prendre la tête

Attention, nous allons ici faire dees reqûete asynchrone, ce qui veut dire que les donnés vont certainement arriver après le chargement de la page !

Utilitaire

Petit rappel concernant les requêtes asynchrone en javascript, voilà comment ça se construit :

    fetch('votre url') // On fait notre appel
        .then((res) => res.json()) // Le resultat sera certainement en json donc nous le convertissons
        .then((res) => {
            // vous gérez désormais la réponse du serveur qui vous a été passée dans la variable "res"
        }) 

Plus d'informations sur la documentation mdn de fetch

La correction

Si vous avez fini, ou que vous êtes vraiment coincé vous pouvez aller voir directement la correction

Ne faites pas cela par facilité, vous n'apprendrez rien de cette manière

Envie de discuter du contenu ?

logo twitter @GarnierKristen