Shibe gallery

Nouveau type de projet, ici le but va être de charger des photos de shiba inu depuis une api et de les afficher dans la page pour que des personnes puissent les consulter. Attention, il faudra aussi que les personnes puissent charger de nouvelles photos

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 vos photos (vous decidez du nombre de photos à afficher)
• Un bouton permettant de charger de nouvelles photos
• Lorsque l’on clique sur le bouton, les photos doivent être remplacées

les données sont à récupérer depuis ce site : https://shibe.online/

Attention, afin que tout marche correctement, vous devez préfixer l'url de l'api shibe.online de cette façon là : https://cors-anywhere.herokuapp.com/urlvousvoulezallerchercher, exemple : https://cors-anywhere.herokuapp.com/https://google.com

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

Gonna go fast ?

Si vous trouvez ça trop facile à votre gôut, vous pouvez ajouter les choses suivantes :

• Un indicateur de chargement des shibe (le temps de récupération des données de la requête)
• Ajouter des éléments indiquant qu'il n'y a pas encore de shibe dans la galerie
• Ajouter une petite animation lorque l'on charge de nouveaux shibe avec animate css : https://github.com/daneden/animate.css

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