Afficher la progression et vérifier le résultat

Une liste peut être correctement enregistrée et mise à jour sans que vous sachiez, d’un coup d’œil, où vous en êtes. Vous allez calculer la part des tâches terminées depuis les données existantes, puis l’afficher dans le résumé et la barre de progression.

Le tableau taches contient déjà les objets avec leur propriété terminee. Comme dans les leçons précédentes, les changements sont enregistrés par les fonctions du module des tâches ; ici, vous vous contentez de lire le tableau et de présenter son état. Le calcul doit aussi fonctionner lorsque le tableau est vide, car une division par zéro ne produit pas un taux exploitable.

Calculer la progression depuis les tâches

Dans js/progression.js, créez une fonction qui parcourt le tableau et compte les objets dont terminee vaut true. Elle renvoie les nombres nécessaires à l’affichage : le nombre de tâches terminées, le total et le pourcentage. Pour une liste vide, le pourcentage est fixé à zéro ; dans les autres cas, le calcul divise le nombre terminé par le total, puis le multiplie par 100.

// Calcule les données nécessaires à l’affichage de la progression.
export function calculerProgression(taches) {
  let terminees = 0;

  for (const tache of taches) {
    if (tache.terminee) {
      terminees += 1;
    }
  }

  const total = taches.length;
  const taux = total === 0 ? 0 : Math.round((terminees / total) * 100);

  return { terminees, total, taux };
}

Le résultat est un objet temporaire destiné à l’affichage ; il ne remplace pas le tableau des tâches et n’a pas à être sauvegardé. Math.round arrondit le pourcentage à l’entier le plus proche. Par exemple, deux tâches terminées sur trois donnent environ 67 %.

Mettre à jour le résumé et la barre

Dans js/affichage.js, ajoutez une fonction d’affichage qui reçoit le même tableau de tâches et utilise le calcul précédent. Le texte reprend le format déjà présent dans le HTML. L’élément progress reçoit le nombre de tâches terminées comme valeur et le total comme maximum ; le texte de remplacement indique aussi le pourcentage.

import { calculerProgression } from "./progression.js";

// Met à jour le résumé et la barre de progression.
export function afficherProgression(taches) {
  const resume = document.querySelector(".taches-progression__texte");
  const barre = document.querySelector(".taches-progression__barre");
  const progression = calculerProgression(taches);

  resume.textContent = `${progression.terminees} tâche${progression.terminees === 1 ? "" : "s"} terminée${progression.terminees === 1 ? "" : "s"} sur ${progression.total}`;
  barre.value = progression.terminees;
  barre.max = progression.total;
  barre.textContent = `${progression.taux}%`;
}

Dans js/main.js, importez cette fonction depuis le module d’affichage. Ajoutez son appel juste après chacun des appels existants à afficherTaches(taches), sans modifier leur signature ni déplacer l’enregistrement : les fonctions de données continuent à sauvegarder comme auparavant.

import { afficherProgression } from "./affichage.js";

// À chaque endroit où la liste est rendue, actualisez aussi la progression.
afficherTaches(taches);
afficherProgression(taches);

Le bloc illustre l’ordre des deux appels ; dans votre fichier, conservez les imports et le code déjà en place et ajoutez l’appel correspondant à chaque chemin de mise à jour. Avec trois tâches dont deux terminées, le résumé indique « 2 tâches terminées sur 3 » et la barre affiche une valeur de 2 sur un maximum de 3, soit 67 %.

Vérifier les résultats et la sauvegarde

Testez d’abord une liste vide : le résumé indique zéro tâche terminée sur zéro et la barre ne signale aucune progression. Ajoutez ensuite une tâche, puis terminez-la ; le résumé doit passer de zéro sur un à une tâche terminée sur une, et le pourcentage de 0 à 100. Avec plusieurs tâches, vérifiez aussi un cas partiel, par exemple une tâche terminée sur deux : la barre atteint 50 %.

Pour contrôler la persistance, terminez une tâche, rechargez la page et observez à nouveau sa case, le résumé et la barre. Les trois affichages doivent correspondre à l’état conservé dans le navigateur. Supprimez ensuite une tâche et vérifiez que le total et le taux sont recalculés à partir du nouveau tableau.

À retenir

• Comptez les tâches terminées depuis la propriété `terminee` de chaque objet.
• Calculez le taux uniquement lorsque le total est supérieur à zéro ; choisissez 0 pour une liste vide.
• Mettez à jour le résumé et la barre après chaque modification et chaque rendu initial.
• Rechargez la page pour vérifier que l’état sauvegardé correspond à la progression affichée.