Étape 14 : JS - Calcul des Statistiques (reduce)

C’est l’étape “Algorithmique”. Nous voulons compter combien nous avons de tâches, combien sont actives, et combien sont finies.

On pourrait faire 3 boucles for… ou utiliser la méthode très puissante reduce().

1. Méthode getStatistiques

Dans la classe GestionnaireTaches :

    // Obtenir les statistiques avec reduce()
    getStatistiques() {
        return this.taches.reduce(
            (stats, tache) => {
                // Pour chaque tâche...
                stats.total++; // On incrémente le total

                if (tache.terminee) {
                    stats.terminees++;
                } else {
                    stats.actives++;
                }

                return stats; // On retourne l'accumulateur pour la prochaine boucle
            },
            // Valeurs initiales de l'accumulateur
            { total: 0, actives: 0, terminees: 0 }
        );
    }

2. Afficher les Stats

Créons une fonction pour mettre à jour les chiffres dans le DOM.

Dans la zone des fonctions d’affichage (près de afficherTaches) :

// Mise à jour des statistiques
function majStats() {
    const stats = app.getStatistiques();

    // On met à jour le texte des éléments <span>
    statsElements.total.textContent = stats.total;
    statsElements.active.textContent = stats.actives;
    statsElements.terminees.textContent = stats.terminees;
}

3. Connecter le tout

Nous devons appeler majStats() partout où les données changent !

Modifiez les endroits suivants :

• Dans l’initialisation DOMContentLoaded
• Dans le submit du formulaire (après ajout)
• Dans window.toggleTache
• Dans window.supprimerTache

Example pour toggleTache :

window.toggleTache = (id) => {
    app.toggleStatut(id);
    afficherTaches();
    majStats(); // <--- AJOUTER CECI
};

Faites de même pour les autres.

---

Test : Ajoutez 2 tâches. Marquez-en une comme terminée. Les compteurs devraient afficher : Total: 2, Actives: 1, Terminées: 1. Supprimez-en une, les compteurs doivent descendre.