Plateforme de bloging

On va faire une page web qui permettra d'afficher les données des utilisateurs de Typicode grâce à des appels asynchrones. Vous pouvez réaliser cet exercice à l'aide de Jquery ou Bootstrap, mais ça n'est pas une obligation. Vous devez avant tout bien maîtriser les appels asynchrones ici, donc ne vous compliqué pas trop la vie. N'utilisez que la fonction fetch() pour faire vos appels de ressources. N'oubliez pas d'avoir la doc de "l'API" sous les yeux en travaillant. Et vous pouvez faire des tests des routes proposées directement dans votre navigateur afin d'avoir un aperçu de ce que votre script est sensé recevoir (le JSON).

Voici le rendu final de ce que'on cherche à atteindre :

Mise en place :

• créer un nouveau dossier pour cet exercice
  
• créer un fichier index.html et un fichier exercice.js à l'intérieur
• mettez en place une structure HTML/JS basique, et vérifier que tout fonctionne

Note importante pour ceux qui n'ont jamais vu les bases de données relationnelles. Voici quelques images qui vous montrent comment sont "reliées" des données entre elles dans une base de données classique :

Et voici l'équivalence dans le contexte de notre exercice : 

Partie 1 :

On commence par créer une liste déroulante <select> contenant la liste de nos utilisateurs. Pour la remplir, nous allons interroger le serveur pour récupérer la liste des utilisateurs existant.

1. dans votre fichier HTML, créer une liste déroulante vide, avec l'id "listUsers"
2. dans votre JS, interroger l'API https://jsonplaceholder.typicode.com pour récupérer la liste des utilisateurs (en utilisant la méthode fetch() )
3. mettez en place vos .then() afin de pouvoir traiter les informations reçues en JSON. Utilisez-les console log et la méthode .json() pour transformer les données reçues en JS
4. une fois que vous avez votre tableau d'utilisateurs, faites en sorte de remplir votre liste déroulante avec les noms des utilisateurs. Pensez à rajouter l'id de l'utilisateur dans l'attribut "value" des options de votre liste pour y avoir accès facilement plus tard
5. une fois que c'est fait, normalement votre page doit afficher la liste des utilisateurs dans la liste déroulante

Partie 2 : récupérer les todos

Maintenant que l'on a accès à notre liste d'utilisateur, on va développer une fonction qui permet de récupérer les tâches que cet utilisateur.

1. dans votre fichier HTML, créer un fieldset ayant pour légende "Liste de tâches à faire"
2. dans votre fieldset, créer un bouton "Voir les tâches" avec l'id "loadTodo", puis une liste <ul> vide ayant l'id "listTodos"
3. dans votre JS, créer un événement sur le clic du bouton "loadTodo"
4. dans cet événement, commencer par récupérer l'id de l'utilisateur sélectionner dans votre liste déroulante
5. ensuite, interroger le serveur afin de récupérer tous les todos de l'utilisateur sélectionné dans la liste déroulante. Attention à paramétrer correctement votre url
6. une fois que votre fetch est bien en place, boucler sur votre tableau de tâches afin de rajouter chaque todo dans la liste "listTodos"
7. les afficher en vert quand elles sont réalisées (completed)
8. faites en sorte que lorsque l'on change d'utilisateur dans la liste déroulante, la liste des todos se vide

Partie 3 : album photo

1. dans votre HTML, rajouter un fieldset avec l'id "albums", et la légende "album photo"
2. à l'intérieur, rajouter un bouton "Voir les albums", ayant l'id "loadAlbums", suivi d'un trait séparateur <hr />
3. dans votre JS, faites en sorte d'afficher la liste des albums photo de l'utilisateur sélectionné dans votre liste déroulante. Afficher les sous votre <hr />, sous forme de lien. Leur donner le nom de chaque album, et un petit style CSS de votre choix.
4. Rajouter un événement sur le click d'un album, qui affiche simplement l'id de l'album cliqué

Partie 4 : afficher les photos de chaque album

1. quand on clic sur un album, faites en sorte de lancer une fonction qui va aller chercher toutes les données concernant les photos de l'album cliqué
2. afficher les thumbnails à la suite dans votre fieldset photos
3. rajouter le titre de la photo dans l'attribut "title" de vos balises <img>
4. n'oubliez pas de vider toutes les photos a chaque fois que l'on clique sur un nouvel album
5. faites en sorte que lorsque l'on clique sur une photo, on ouvre un nouvel onglet dans le navigateur qui pointe vers la photo originale
6. n'oubliez pas de vider le fieldset correctement lorsque l'on change d'utilisateur

Partie 5 : récupérer les articles et les commentaires

Dernière étape pour les plus téméraires : mettre en place un bouton qui permet de récupérer tous les articles d'un utilisateur, et d'afficher tous les commentaires lié à chaque article en dessous. Le principe reste le même que les exercices précédents, mais vous allez devoir faire les deux choses en même temps (récupérer les articles + les commentaires associés).

Pour ceux qui auront fini ça, vous pouvez :

1. améliorer le style
   
2. faire en sorte que tout se charge automatiquement quand on change d'utilisateur
   
3. intégrer un plugin pour afficher les images originales dans un overlay par-dessus la page (plugin Jquery et/ou Bootstrap)
   
4. etc...