Khardiata et Sabrina
<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/recipes?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 recettes 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 recettes mises 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 See the Recipe sur votre page de liste de recettes, iel soit redirigé-e vers cette page, remplie avec les informations de la recette sur laquelle iel a cliqué.
let url = "https://dummyjson.com/recipes/id"
en remplacant id par l’id du post.