Étape 12 : JS - Interactivité (Cocher/Décocher)

Nous allons rendre la case à cocher fonctionnelle.

1. Méthode toggleStatut dans la Classe

Retournez dans GestionnaireTaches. Nous avons besoin d’une méthode pour trouver une tâche par son ID et inverser son état terminee.

    // Dans la classe GestionnaireTaches...

    // Basculer le statut (complétée/non complétée)
    toggleStatut(id) {
        // map() est parfait ici : il parcourt tout le tableau et crée une nouvelle version
        this.taches = this.taches.map((tache) => {
            if (tache.id === id) {
                // Si c'est la bonne tâche, on inverse 'terminee'
                // { ...tache } copie toutes les propriétés existantes
                return { ...tache, terminee: !tache.terminee };
            }
            // Sinon, on retourne la tâche telle quelle
            return tache;
        });
    }

2. Exposer la fonction au HTML

Dans notre HTML (étape 11), nous avons écrit onchange="toggleTache(${tache.id})". Le problème, c’est que les fonctions à l’intérieur de notre fichier JS ne sont pas accessibles directement par le HTML (scope). Il faut les attacher à l’objet global window.

Ajoutez ceci à la fin de votre fichier script.js :

// Fonctions globales pour les événements onclick dans le HTML
window.toggleTache = (id) => {
    // 1. On change l'état dans les données
    app.toggleStatut(id);

    // 2. On rafraîchit l'affichage
    afficherTaches();

    // (Bientôt, on mettra aussi à jour les stats ici)
};

Explication de la mécanique

1. L’utilisateur clique sur la checkbox.
2. Le HTML appelle window.toggleTache(12345).
3. toggleTache appelle app.toggleStatut(12345).
4. app.toggleStatut trouve la tâche dans le tableau et passe terminee de false à true.
5. afficherTaches() est rappelé. Il redessine tout.
6. Comme la tâche est maintenant true, le CSS ajoute la classe .completed (barré + grisé) et la checkbox apparaît cochée.

---

Test : Créez une tâche. Cliquez sur la case. Le texte devrait se barrer et devenir gris. Cliquez à nouveau, elle redevient normale. Bravo !