Construire l’ajout et l’affichage des tâches

Une tâche peut être correctement enregistrée sans apparaître dans la liste après le rechargement de la page. À l’inverse, créer les éléments de la liste uniquement au moment du clic ne montre pas les tâches déjà sauvegardées. Vous allez faire du tableau taches la source de l’affichage et reconstruire la liste après chaque changement.

Le formulaire HTML possède déjà un champ marqué required. Le navigateur empêche donc l’envoi lorsque le champ est vide ; dans le gestionnaire JavaScript, vérifiez aussi le libellé après suppression des espaces superflus, car une saisie composée uniquement d’espaces ne constitue pas un nom utile.

Faire du tableau la source de l’affichage

Dans js/main.js, gardez l’importation existante de chargerTaches, enregistrerTaches et ajouterTache, ainsi que l’initialisation de taches avec chargerTaches(). Remplacez la création isolée de l’élément dans l’écouteur du formulaire par deux fonctions nommées : l’une construit un élément de liste, l’autre vide et reconstruit la liste depuis le tableau. Le rendu initial doit avoir lieu après la déclaration de ces fonctions.

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

const taches = chargerTaches();
const formulaire = document.querySelector(".taches-formulaire");
const champ = document.querySelector(".taches-formulaire__champ");
const liste = document.querySelector(".taches-liste");

function formaterLibelle(tache) {
  return tache.libelle;
}

function creerElementTache(tache) {
  const element = document.createElement("li");
  element.classList.add("taches-liste__element");

  const caseTache = document.createElement("input");
  caseTache.classList.add("taches-liste__case");
  caseTache.type = "checkbox";
  caseTache.checked = tache.terminee;
  caseTache.setAttribute("aria-label", `Terminer : ${tache.libelle}`);

  const libelle = document.createElement("span");
  libelle.classList.add("taches-liste__libelle");
  libelle.textContent = formaterLibelle(tache);

  const boutonSuppression = document.createElement("button");
  boutonSuppression.classList.add("taches-liste__suppression");
  boutonSuppression.type = "button";
  boutonSuppression.textContent = "Supprimer";
  boutonSuppression.setAttribute("aria-label", `Supprimer : ${tache.libelle}`);

  element.append(caseTache, libelle, boutonSuppression);
  return element;
}

function afficherTaches() {
  liste.replaceChildren();

  for (const tache of taches) {
    liste.append(creerElementTache(tache));
  }
}

afficherTaches();

formulaire.addEventListener("submit", function (evenement) {
  evenement.preventDefault();

  const libelle = champ.value.trim();
  if (libelle === "") {
    champ.value = "";
    champ.focus();
    return;
  }

  ajouterTache(taches, libelle);
  enregistrerTaches(taches);
  afficherTaches();
  formulaire.reset();
  champ.focus();
});

Chaque objet du tableau contient un libelle et un booléen terminee, conformément au modèle déjà utilisé par le projet. creerElementTache fabrique les trois éléments attendus dans chaque ligne : une case à cocher, le texte du libellé et un bouton de suppression. À cette étape, ces contrôles sont affichés, mais leur comportement de modification et de suppression sera ajouté dans la leçon suivante.

afficherTaches retire d’abord les anciens éléments avec replaceChildren(), puis en crée un pour chaque tâche. L’appel juste après sa déclaration affiche les données chargées au démarrage ; le même appel après un ajout actualise la liste sans conserver une ancienne représentation. Le texte passe par textContent : il est inséré comme texte, et non interprété comme du HTML.

Traiter l’envoi du formulaire

L’écouteur intercepte l’événement submit et appelle preventDefault() afin que le navigateur ne recharge pas la page. La valeur du champ est nettoyée avec trim(), puis le bloc conditionnel refuse une chaîne vide. return arrête alors le traitement de cette fonction ; le champ est vidé et replacé au centre de saisie.

Pour une valeur valide, le code ajoute la tâche, enregistre les données, reconstruit la liste puis réinitialise le formulaire. Le navigateur valide également le champ required avant l’événement submit ; la vérification dans le gestionnaire protège en plus contre une valeur devenue vide après nettoyage. La persistance et les imports du module restent ceux mis en place dans les leçons précédentes.

Vérifier le résultat

Rechargez la page avec des tâches déjà enregistrées : chacune doit réapparaître dans la liste. Saisissez ensuite « Préparer le repas » et envoyez le formulaire ; une nouvelle ligne doit s’afficher, le champ doit être vidé et la tâche doit rester présente après un nouveau rechargement. La progression n’est pas recalculée dans cette étape ; elle sera traitée dans la leçon dédiée.

À retenir

• Le tableau `taches` sert de référence pour générer toute la liste.
• Le rendu initial affiche les tâches rechargées depuis le stockage local.
• Un ajout valide entraîne l’enregistrement puis la reconstruction de la liste.
• Le libellé est inséré avec `textContent` et chaque élément utilise les classes prévues.

Dans la prochaine leçon, vous ajouterez la modification de l’état accompli et la suppression d’une tâche depuis cette liste.