Camille et Gabriel
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
let url = "https://dummyjson.com/posts?limit=12"
Vous devrez faire une intégration qui reproduit la maquette dont vous avez le lien plus haut.
Vous devrez ensuite utiliser fetch et les notions vues en cours de JavaScript pour récupérer les données de l’API et faire en sorte de les afficher sur votre page, en générant le HTML depuis votre JavaScript (la maquette d’exemple n’en présente que 4 différents, vous devez en afficher 12 différents).
L’utilisateur-ice doit ensuite pouvoir mettre autant des 12 posts qu’iel souhaite en favoris en cliquant sur le coeur. La liste des favoris est stockée dans le local Storage, lorsque vous chargez la page les coeurs des posts mis en favoris doivent être remplis.
Vous devrez faire une intégration qui reproduit la maquette dont vous avez le lien plus haut.
Ensuite vous devrez faire en sorte que lorsque l’utilisateur-ice clique sur l’un des boutons Read the Post sur votre page de liste de posts, iel soit redirigé-e vers cette page, remplie avec les informations du post sur lequel il a cliqué.
let url = "https://dummyjson.com/posts/id"
en remplacant id par l’id du post.
let url = "https://dummyjson.com/users/id"
en remplacant id par l’id du user.