Réagir aux actions dans la page

Un formulaire de tâche ne doit pas seulement afficher un champ : lorsque vous le validez, la nouvelle tâche doit apparaître dans la page sans rechargement. Pour y parvenir, vous reliez une action de l’utilisateur à du JavaScript, puis vous créez les éléments HTML nécessaires à l’affichage. Vous allez connecter le formulaire déjà présent dans index.html. À ce stade, l’élément ajouté reste en mémoire dans la page et dans le tableau courant ; sa conservation après fermeture du navigateur viendra plus tard.

Repérer le formulaire et son champ

Le fichier HTML contient déjà un formulaire de classe taches-formulaire et un champ identifié par nouvelle-tache. Dans un module JavaScript exécuté après l’analyse du document, document.querySelector vous permet de récupérer ces éléments grâce à un sélecteur CSS. Vous utiliserez ensuite ces références pour écouter l’envoi et lire le texte saisi.

const taches = [];

function formaterLibelle(tache) {
  const etat = tache.terminee ? "Terminée" : "À faire";
  return `${etat} : ${tache.libelle}`;
}

const formulaire = document.querySelector(".taches-formulaire");
const champ = document.querySelector("#nouvelle-tache");
const liste = document.querySelector(".taches-liste");

console.log(formulaire, champ, liste);

La console affiche les trois éléments HTML sélectionnés : le formulaire, le champ de saisie et la liste. Les variables `taches` et `formaterLibelle` reprennent les éléments du projet des leçons précédentes ; conservez les valeurs déjà présentes dans votre tableau au lieu de le vider si vous en avez.

Écouter la validation du formulaire

Vous attachez un écouteur à l’événement submit du formulaire. Cet événement se produit lorsque la personne clique sur le bouton d’ajout ou valide le champ avec le clavier. La fonction appelée reçoit un objet événement, qui représente cette action et fournit notamment la méthode preventDefault().

Par défaut, un formulaire soumis peut provoquer le rechargement de la page. Appelez preventDefault() pour empêcher ce comportement : votre code peut alors traiter la saisie et modifier la page sans perdre l’état courant. La propriété champ.value contient le texte du champ au moment de la validation.

Créer et insérer une tâche

Pour chaque validation, vous créez un objet qui suit le modèle du projet : un libellé et un état booléen. Vous ajoutez cet objet au tableau, puis vous construisez un élément de liste avec les classes prévues par le contrat. Enfin, append insère cet élément dans la liste et le champ est vidé pour permettre une nouvelle saisie.

const taches = [];

function formaterLibelle(tache) {
  const etat = tache.terminee ? "Terminée" : "À faire";
  return `${etat} : ${tache.libelle}`;
}

const formulaire = document.querySelector(".taches-formulaire");
const champ = document.querySelector("#nouvelle-tache");
const liste = document.querySelector(".taches-liste");

function ajouterTacheEvenement(evenement) {
  evenement.preventDefault();

  const tache = {
    libelle: champ.value.trim(),
    terminee: false
  };

  if (tache.libelle === "") {
    return;
  }

  taches.push(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";

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

  const suppression = document.createElement("button");
  suppression.classList.add("taches-liste__suppression");
  suppression.type = "button";
  suppression.textContent = "Supprimer";

  element.append(caseTache, libelle, suppression);
  liste.append(element);
  champ.value = "";
}

formulaire.addEventListener("submit", ajouterTacheEvenement);

Après avoir saisi `Lire un chapitre` puis validé le formulaire, la liste affiche un nouvel élément avec une case à cocher, le texte `Lire un chapitre` et un bouton `Supprimer`. Le champ est vidé. Le tableau `taches` contient également `{ libelle: "Lire un chapitre", terminee: false }`.

La méthode trim() retire les espaces au début et à la fin du texte ; le test empêche donc d’ajouter une tâche composée uniquement d’espaces. Le HTML possède déjà l’attribut required, qui bloque la soumission d’un champ vide dans un navigateur courant. Ici, ce contrôle JavaScript sert de garde supplémentaire ; la validation complète du formulaire sera étudiée avec la construction de l’ajout et de l’affichage.

Vous créez les nœuds avec document.createElement, puis vous leur associez uniquement les classes définies pour le projet. Le texte de la tâche est placé avec textContent : le navigateur l’affiche comme du texte, sans interpréter une saisie comme du HTML. La case et le bouton apparaissent, mais leurs actions ne sont pas encore reliées ; leur comportement sera ajouté dans une leçon ultérieure.

À retenir

• Sélectionnez le formulaire et le champ avec des sélecteurs correspondant au HTML.
• Écoutez l’événement `submit` et appelez `preventDefault()` pour éviter le rechargement.
• Créez les nœuds avec les classes du contrat et insérez-les dans la liste.
• Gardez le tableau et l’interface cohérents ; l’enregistrement durable et le rendu complet depuis les données viendront ensuite.

Dans la prochaine leçon, vous enregistrerez les tâches dans le navigateur afin de les retrouver après un rechargement.