Pour vous entrainer et améliorer votre application de TodoList, voilà quelques exercices supplémentaires à faire.

Commencez par créer un nouveau dossier en dupliquant le répertoire v10-local-storage

Nettoyage et organisation du code

Dans votre nouveau dossier :

• Créer un nouveau fichier todo.js et copier le code des classes Item et Todo
• Créer un nouveau fichier tododom.js et conserver uniquement la classe ToDoDom
• Renommer le premier fichier en app.js et conserver uniquement les fonctions utilitaires createList et purgeLocalStorage
• Dans la classe ToDoDom :
  • Créer une méthode statique load contenant le code chargement du localStorage
  • Appeler la méthode load en fin du fichier app.js
  • Créer une méthode statique purge contenant le code chargement de la fonction purgeLocalStorage
  • Appeler la méthode purge dans la fonction purgeLocalStorage
• Modifier l’import du fichier Javscript dans index.html pour inclure les 3 fichiers en defer :
  • le fichier todo.js
  • le fichier tododom.js
  • le fichier app.js

Tester que tout fonctionne toujours correctement.

Nouveaux contrôles

• Pour chaque objet ToDoDom, ajouter des contrôles pour :
  • Filtrer les tâches par statut (validés, non validés, tous)
  • Un bouton pour marquer toutes les tâches en statut validé ou non
  • Un bouton pour supprimer toutes les tâches marqués comme validées

Edition d’une tâche

On veut pouvoir modifier le texte d’une tâche :

• Lors d’un double clic sur une tâche :
  • Faire apparaitre un input de type texte à la place du texte de la tâche
  • L’input doit contenir la valeur actuelle
  • Lorsque l’on clique sur la touche entrée du clavier, la tâche est mise à jour
  • Le localStorage doit prendre en compte ces modifciations

Ajout de listes et de tâches avec la touche entrée

On veut pouvoir ajouter des listes et des tâche en appuyant sur la touche entrée du clavier, sans avoir à cliquer sur un bouton “ajouter”

Undo / Redo

On souhaite pouvoir revenir en arrière et en avant dans nos modifications :

• Le localStorage devrait maintenant stocker un tableau contenant au moins 10 versions de l’état courant
• Les fonctions undo / redo, déclenché par des boutons ou bien les commandes ctrl+Z et ctrl+shift+Z, doivent pouvoir “naviguer” dans ce tableau et régénérer l’interface en fonction des différents états sauvegardés

Version Responsive

Modifier le CSS pour vous assurer que l’affichage reste correct à travers différentes résolutions d’écrans

Inspiration

Vous pouvez consulter le site https://todomvc.com/, qui propose l’implémentation de la même application de ToDo list, en utilisant différentes technologies et frameworks