Pratiquons avec une TodoList

Voir la vidéo

JavaScript côté navigateur

Description Sommaire

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.

Publié
Technologies utilisées
Auteur :
Grafikart
Partager