Exercice 14 - Liste de tâches

Dans cet exercice nous allons coder les fonctionnalités d'une liste de tâches. La portion HTML et CSS est déjà fait, vous n'avez qu'à cloner le dépôt git disponible à l'adresse Github Classroom que je vais vous fournir. Une fois le dépôt récupéré vous devriez avoir une page qui ressemble à ceci.

Voici les fonctionnalités à programmer :

• Quand on appuie sur la touche "Entrée" ou si l'on clique sur le bouton "+", on ajoute le texte saisie dans la section "Tâches à faire". S'il n'y a pas de texte on ajoute rien. Dans la section "Tâche à faire" il y a une balise ul vide (une liste à puce). Le texte ajouté sera dans une balise li à l'intérieur de la balise ul. Vous devez ajouter la classe "tache" au nouvel item.
• Quand on clique sur une tâche de la liste des tâches à faire, on le déplace dans la liste des tâches complétées. On lui ajoute aussi la classe "fait". Pour déplacer la tache d'une liste à l'autre, on n'a juste à récupérer l'élément dans une variable et ensuite de l'ajouter dans la bonne liste.
• Quand on clique sur l'icône de la poubelle, on doit supprimer toutes les tâches de la liste des tâches complétées.

Une fois l'exercice terminé, faites un commit de vos modifications et un push pour les envoyer sur Github.

Voici un exemple du résultat final

Pour aller plus loin

Enregistrez la liste des tâches à faire et des tâches complétées dans le stockage local et réaffichez-les lors du chargement de la page. Référez-vous au notes de cours sur le stockage local. Une bonne stratégie serait de créer un tableau pour les valeurs de chaque liste et d'ensuite les enregistrer dans le stockage dès qu'il y a un changement dans les listes.