Nous avons maintenant un “moteur” de Todo list plutôt fonctionnel :

• On peut créer des listes et les nommer
• On peut ajouter/modifier/supprimer des éléments
• On peut changer le statut des éléments en validé ou non

Évidemment, l’affichage dans la console n’est pas très pratique… Il est temps de passer à une interface plus évoluée !

Cela dit, le fait séparer le “moteur” et l’interface est une bonne pratique, recommandée en programmation.

Il existe plusieurs design patterns qui visent à séparer le code “backend” du code “frontend”.

Dans notre cas, on ne va faire que du frontend, mais le code que l’on vient de réaliser s’apparente à du code backend.
Grâce à la séparation entre le code qui gère les Todo lists en mémoire d’une part, et l’interface graphique que nous allons développer d’autre part, nous allons respecter le SoC (Separation of Concerns)
Ce concept est très important et devrait toujours être respecter autant que possible.

Bref, revenons sur notre Todo list.

L’API DOM

Comme nous l’avons vu dans notre premier code en début de module, l’API Javascript DOM permet d’interagir avec le DOM généré par la navigateur.

Lorsque l’on execute du code Javascript dans VSCode, on utilise l’environnement node.js. Cela signifie que l’API DOM n’est pas disponible et les fonctions de l’API DOM ne peuvent pas être utilisées.

Pour cette version, nous allons donc créer un document HTML d’une part, puis mettre à jour notre Javascript pour pouvoir interagir avec le DOM :

1. Créer un nouveau répertoire dans votre projet appelé v7-dom
2. Dans ce répertoire :
   • Créer un fichier index.html contenant ce code html
   • Dupliquer le fichier v6-loops-ifs.js dans le répertoire et le nommer v7-dom.js
   • Lancer le fichier index.html avec GoLive
   • Vous devriez voir ceci :

Pour l’instant si on clique sur le bouton il ne se passe rien. C’est normal, il va falloir modifier notre Javascript !

On peut voir dans le fichier index.html 2 éléments qui doivent nous interpeler :

Premièrement, on peut voir que le bouton “Créer une liste” est configuré pour déclencher une fonction Javascript createList() lors du clic

Deuxièmement, on peut voir un div avec un identifiant “lists-container”. On peut supposer que c’est dans ce bloc que l’on voudra ajouter l’affichage de nos Todo lists.

Modification du DOM

Dans cette première version avec le DOM, nous allons simplement :

1. Déclencher une fonction au clic du bouton
2. Accéder au container qui va contenir les listes
3. Générer l’affichage en HTML de la liste
4. Ajouter cet affichage au container

Pour ce faire, nous allons créer une nouvelle classe d’objet ToDoDom :

• Avec un constructeur qui prend en paramètre un objet de la classe ToDo et l’assigne à la propriété this.todo
• Avec une méthode getHTML qui va générer des éléments HTML représentant notre liste

La classe ToDoDom

Vous pouvez déjà créer la classe ToDoDom et son constructeur.

Ensuite, pour la méthode getHTML, nous allons créer des éléments HTML grâce à l’API DOM :

• document.createElement() permet de créer des éléments HTML.
• Par exemple :

let container = document.createElement('div');

• va créer un élément div et le stocker dans la variable container

container.innerHTML = '<h2>Un titre</h2>';

• va ajouter une balise H2 dans le contenu HTML de notre élément container
• Nous avons maintenant un élément HTML qui contient le titre de notre liste
• On va pouvoir lui ajouter de nouveaux éléments HTML avec la méthode appendChild()
• Par exemple :

let ul = document.createElement('ul');
container.appendChild(ul);

• va ajouter un nouvel élément HTML <ul> à notre container
• Enfin, on va pouvoir ajouter des éléments <li> à notre élément <ul> avec les items de notre liste :

this.todo.items.forEach((item, index) => {
    let li = document.createElement('li');
    li.textContent = item.done ? '(X) ' + item.name : '( ) ' + item.name;
    ul.appendChild(li);
});

• Et voilà, il ne reste plus à notre méthode que de renvoyer la variable container, qui dans mon example correspond à :

Ajout de la liste au clic du bouton

Tout semble prêt, il nous reste la fonction createList() à implémenter :

function createList() {
    
    //On créer une instance de ToDo, comme dans les versions précédentes
    let todo = new ToDo('My todo', [new Item('item1'), new Item('item2'), new Item('item3')]);
    
    //On créer une instance de ToDoDom, qui prend en paramètre notre instance de ToDo
    let todoList = new ToDoDom(todo);
    
    //On récupère l'élément HTML depuis index.html qui contiendra notre liste
    let listContainer = document.getElementById('lists-container');

    //On ajoute le contenu HTML de notre liste à l'élément HTML récupéré
    listContainer.append(todoList.getHTML());
    
}

Et voilà ! Si vous avez tout codé correctement, vous devriez voire la liste apparaître dans la page lorsque vous cliquez sur le bouton :

On pourra observer aussi le DOM qui est modifié lors du clic sur le bouton de création d’une liste.

Vous pouvez cliquer plusieurs fois ! Grâce à notre architecture, on peut créer autant de liste que l’on veut.

Ce n’est pas encore idéal, mais on s’approche !