Pratiquons avec une TodoList
Dans ce chapitre je vous propose de pratiquer ce que l'on a vu depuis le début de cette formation au travers d'un exemple concret : la création d'une liste de tâche à faire.
Pour cet exercice je vous donne la structure HTML de notre liste et votre objectif est de rendre cette liste fonctionnelle à l'aide du JavaScript.
<!DOCTYPE html>
<html lang="fr"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TodoList</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
</head>
<body>
<section class="container pt-5" id="todolist">
<form class="d-flex pb-4">
<input required="" class="form-control" type="text" placeholder="Acheter des patates..." name="title" data-com.bitwarden.browser.user-edited="yes">
<button class="btn btn-primary">Ajouter</button>
</form>
<main>
<div class="btn-group mb-4" role="group">
<button type="button" class=" btn btn-outline-primary active" data-filter="all">Toutes</button>
<button type="button" class=" btn btn-outline-primary" data-filter="todo">A faire</button>
<button type="button" class=" btn btn-outline-primary" data-filter="done">Faites</button>
</div>
<ul class="list-group">
<li class="todo list-group-item d-flex align-items-center">
<input class="form-check-input" type="checkbox" id="todo-1">
<label class="ms-2 form-check-label" for="todo-1">
Tâche à faire 2
</label>
<label class="ms-auto btn btn-danger btn-sm">
<i class="bi-trash">
</i>
</label>
</li>
<li class="todo list-group-item d-flex align-items-center">
<input class="form-check-input" type="checkbox" id="todo-2">
<label class="ms-2 form-check-label" for="todo-2">
Tâche à faire 1
</label>
<label class="ms-auto btn btn-danger btn-sm">
<i class="bi-trash">
</i>
</label>
</li>
</ul>
</main>
</section>
</body>
</html>Vous devrez faire en sorte de charger la liste des tâches à faire depuis un serveur via l'url https://jsonplaceholder.typicode.com/todos?_limit=5. L'utilisateur aura ensuite la possibilité de rajouter un élément à la liste de tâche à faire à l'aide du formulaire. Il pourra aussi supprimer une tâche à l'aide de l'icône en forme de corbeille. Enfin, un système de filtre permettra de masquer ou d'afficher les tâches en fonction de leur état.
Il n'y a aucune réaction pour le moment.