BRE03

Projet ToDo List

Groupe

Clémentine, Hugo et Joris

Page ToDoList

Maquette

Fichier de la maquette

Ressources

Palette de couleurs

La palette sur Coolors

Polices

<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">

API pour les données

let url = "https://dummyjson.com/todos?limit=12"

Style custom pour les checkboxes

Le lien du tuto

Consignes

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 tâches comme complétées qu’iel le souhaite. La liste des tâches complétées est stockée dans le localStorage et au chargement de la page, les tâches complétées apparaissent déjà cochées.

Page ajout d’une tâche

Coming soon