Fetch API - Zoom UI

Pour cet exercice, nous allons recréer l’interface de l’application de vidéoconférence Zoom. Cette interface sera en mode "galerie", c'est-à-dire qu'on y verra les vignettes des différents participants à la rencontre Zoom.

Aperçu du résultat 👇

aperçu du résultat attendu. Matériel Pen de départ
Les personnes affichées seront différentes dans votre exercice puisqu’elles sont aléatoires. Vous n’avez qu’à écrire du JavaScript (nul besoin de modifier le HTML ou le CSS).

La structure HTML de chaque vignette est la suivante:

<div class="preview"> <div class="media"> <img src="urlimg.jpg" alt="Prénom Nom"> </div> <div class="name">Prénom Nom</div> </div> Requis Il faut préalablement récupérer les informations des personnes participant à la réunion. Pour ce faire, il faut utiliser fetch afin d'accéder à l'API de randomuser.me à l'adresse suivante: https://randomuser.me/api?results=9 Une fois le résultat reçu, convertissez-le en JSON. Faites un console.log() du JSON obtenu afin de voir ce qu'il contient exactement. Bouclez sur toutes les personnes dans le JSON afin de générer leur aperçu HTML dans l'élément .zoom. Affichez l'image large, le prénom et le nom de chaque personne. Basez-vous sur les classes CSS déjà présentes afin de déterminer la structure HTML à reproduire. Notes de cours 📚
Promesses JavaScript Représentant complétion ou échec d'une opération asyncrone
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
manipulation DOM Permet de manipuler le contenu et la structure du DOM.
Accéder au propriété d'un objet JS