Pour cet exercice, nous allons recréer l’interface en mode galerie de l’application de vidéoconférence Zoom.

Aperçu du résultat 👇

Matériel

Requis

  1. 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

  2. Une fois le résultat reçu, convertissez-le en JSON.

  3. Faites un console.log() du JSON obtenu afin de voir ce qu'il contient exactement.

  4. Bouclez sur toutes les personnes dans le JSON afin de générer leur aperçu HTML dans l'élément .zoom.

  5. Affichez l'image large, le prénom et le nom de chaque personne.

  6. Basez-vous sur les classes CSS déjà présentes afin de déterminer la structure HTML à reproduire.