Contenu du cours
Projet TodoList
Programmer une Todo list (liste de choses à faire) en Javascript est un excellent exercice d'apprentissage. Une Todo list couvre différents aspects et concepts que l'on retrouvera dans la majorité des projets web : Manipulation d'objets Javscript, du DOM HTML et du CSSOM, formulaire, changement d'états, animation, etc. Dans cette section, nous allons réaliser plusieurs versions d'une Todo list, en démarrant avec une version simple que nous ferons évoluer en ajoutant des fonctionnalités.
0/13
Introduction au Javascript

Maintenant que nos Item ont un statut validé ou non, on va pouvoir boucler sur notre liste pour générer un affichage en fonction !

  1. Dupliquer le fichier v5-boolean.js et le nommer v6-loops-ifs.js
  2. Mettre à jour le commentaire en haut du fichier
  3. Mettre à jour la méthode display de la classe ToDo pour qu’elle
    • affiche tout d’abord le nom de la liste
    • puis boucle sur les items
      • pour chaque item
        • Si l’item a un statut terminé, afficher quelque chose du type “(X) – Item 1
        • Sinon, afficher quelque chose du type “( ) – Item 1
    • Commencer par une boucle classique for
    • Essayer ensuite de réduire la taille du code, en utilisant par exemple une boucle forEach et un opérateur ternaire
let myTodo = new ToDo('My todo', [new Item('item1'), new Item('item2'), new Item('item3')]);
myTodo.display();

doit afficher quelque chose comme :

 My todo
( ) 1 item1
( ) 2 item2
( ) 3 item3
  1. Pour s’exercer, essayer d’implémenter une nouvelle méthode toggleAll qui change le statut de tous les éléments de la liste à validé ou non validé

Essayez de tout faire par vous même, puis vous pouvez comparer avec cette correction.