Ajouter la fin de tâche et la suppression

Une tâche ajoutée reste affichée, mais le gestionnaire ne sait pas encore enregistrer qu’elle est terminée ni la retirer. Vous allez relier ces actions aux données, puis reconstruire la liste depuis le tableau pour que l’écran et le stockage restent cohérents.

La liste étant déjà générée à partir du tableau taches, évitez de modifier uniquement l’apparence du nœud affiché : cette modification disparaîtrait au prochain rendu. Chaque élément possède un index associé à sa tâche ; les actions utiliseront cet index pour modifier ou retirer la bonne entrée du tableau.

Mettre à jour les données

Dans js/taches.js, ajoutez deux fonctions nommées. La première inverse la propriété terminee de l’objet situé à l’index reçu ; la seconde retire cet objet. Chaque fonction enregistre le tableau après sa modification. Ce code suppose que les objets tâches utilisent bien les propriétés libelle et terminee, comme dans le modèle construit précédemment.

export function basculerTache(taches, index) {
  const tache = taches[index];

  if (!tache) {
    return;
  }

  tache.terminee = !tache.terminee;
  enregistrerTaches(taches);
}

export function supprimerTache(taches, index) {
  if (index < 0 || index >= taches.length) {
    return;
  }

  taches.splice(index, 1);
  enregistrerTaches(taches);
}

Le test protège les données si l’index ne désigne aucune tâche. Pour la suppression, splice retire un élément à partir de l’index ; la longueur du tableau diminue alors d’une unité. Après chaque modification, enregistrerTaches conserve le nouvel état dans le navigateur. L’ajout existant continue d’utiliser sa propre fonction d’enregistrement : ne le sauvegardez pas une deuxième fois.

Afficher l’état de la tâche

Dans la fonction existante afficherTaches de js/affichage.js, conservez la création de chaque ligne et son index. Lors de la création de la case à cocher, reflétez la propriété terminee dans sa propriété checked. La valeur de checked est un booléen : si la tâche est terminée, la case apparaît cochée ; sinon, elle reste vide. Le bouton de suppression doit également porter l’index de cette tâche.

// Dans la boucle existante de afficherTaches, pour chaque tâche :
const caseTache = document.createElement("input");
caseTache.type = "checkbox";
caseTache.className = "taches-liste__case";
caseTache.checked = tache.terminee;
caseTache.dataset.index = index;

const boutonSuppression = document.createElement("button");
boutonSuppression.type = "button";
boutonSuppression.className = "taches-liste__suppression";
boutonSuppression.dataset.index = index;
boutonSuppression.textContent = "Supprimer";

Intégrez ces éléments à la ligne créée par votre fonction existante, avec le libellé dans l’élément de classe taches-liste__libelle. Gardez les classes contractuelles déjà en place et la même structure de ligne. Le rendu doit vider puis reconstruire la liste depuis taches ; il ne faut pas créer une seconde liste parallèle ni conserver des lignes devenues périmées.

Traiter les actions sur la liste

Plutôt que d’ajouter un écouteur à chaque case et à chaque bouton après chaque rendu, écoutez les clics sur la liste elle-même. C’est la délégation d’événement : l’événement remonte depuis l’élément activé jusqu’à la liste, qui identifie ensuite le contrôle concerné. Votre liste garde la classe taches-liste définie dans le HTML.

import {
  chargerTaches,
  ajouterTache,
  basculerTache,
  supprimerTache
} from "./taches.js";

// Conservez ici les déclarations et fonctions déjà présentes dans main.js.
const liste = document.querySelector(".taches-liste");

liste.addEventListener("click", gererActionTache);

function gererActionTache(evenement) {
  const controle = evenement.target;
  const index = Number(controle.dataset.index);

  if (controle.classList.contains("taches-liste__case")) {
    basculerTache(taches, index);
    afficherTaches(taches, liste);
  } else if (controle.classList.contains("taches-liste__suppression")) {
    supprimerTache(taches, index);
    afficherTaches(taches, liste);
  }
}

Dans votre fichier réel, ajoutez basculerTache et supprimerTache à l’import existant plutôt que de remplacer les imports déjà utilisés. Gardez aussi une seule déclaration de liste et un seul écouteur. Si votre fonction afficherTaches reçoit déjà ses arguments dans un ordre différent, conservez sa signature existante et adaptez uniquement ces appels.

La conversion avec Number transforme l’index stocké dans l’attribut de données en nombre utilisable pour accéder au tableau. L’écouteur agit sur la case à cocher ou le bouton grâce à leur classe, puis appelle la fonction de données correspondante et reconstruit la liste. Les fonctions d’ajout, de validation et d’affichage initial restent celles de la leçon précédente.

À retenir

• Modifiez d’abord le tableau des tâches, puis enregistrez-le : l’écran seul ne constitue pas la source des données.
• Reflétez l’état terminé avec la propriété `checked` de la case lors du rendu.
• Associez chaque contrôle à l’index de sa tâche et reconstruisez la liste après une action.
• Un écouteur sur la liste peut traiter les actions de ses éléments grâce à la délégation d’événement.

Dans la prochaine leçon, vous calculerez la progression à partir des tâches et vous vérifierez le gestionnaire dans plusieurs situations.