Projet final

Une to-do list complète

On assemble tout : HTML pour la structure, CSS pour l'apparence, JavaScript pour l'interactivité. 5 étapes, chacune vérifiée. Chaque étape repart de la solution de la précédente.

Voici ce que tu vas construire (essaie-la !) :

// Tu comprendras chaque ligne de ce code à la fin du projet 😉
const form = document.querySelector("#form-tache");
const input = document.querySelector("#nouvelle-tache");
const liste = document.querySelector("#liste");
const compteur = document.querySelector("#compteur");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const texte = input.value.trim();
  if (texte === "") return;
  ajouterTache(texte);
  input.value = "";
});

function ajouterTache(texte) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  span.textContent = texte;
  const bouton = document.createElement("button");
  bouton.textContent = "✕";
  bouton.classList.add("supprimer");

span.addEventListener("click", () => {
    li.classList.toggle("faite");
    majCompteur();
  });
  bouton.addEventListener("click", () => {
    li.remove();
    majCompteur();
  });

li.append(span, bouton);
  liste.append(li);
  majCompteur();
}

function majCompteur() {
  const n = liste.querySelectorAll("li:not(.faite)").length;
  const s = n > 1 ? "s" : "";
  compteur.textContent = `${n} tâche${s} restante${s}`;
}

["Apprendre le HTML", "Apprendre le CSS", "Apprendre le JavaScript"].forEach(ajouterTache);

La structure HTML

Étape 1 — Le squelette

Dans la div.app, sous le titre, ajoute :

un formulaire id="form-tache" contenant un champ texte id="nouvelle-tache" (avec un placeholder) et un bouton « Ajouter » ;
une liste vide <ul id="liste"> ;
un paragraphe id="compteur" qui affiche 0 tâche restante.

Indice

Sous le titre, il faut 3 éléments : un form, une ul et un p.

Indice

Le formulaire contient un <input> et un <button>. Vérifie l’orthographe des id : form-tache, nouvelle-tache, liste, compteur.

Indice

Le formulaire :

<form id="form-tache">
  <input id="nouvelle-tache" placeholder="Nouvelle tâche…">
  <button type="submit">Ajouter</button>
</form>

Le style CSS

Étape 2 — Une jolie carte

.app : fond blanc, max-width: 420px, centrée, avec padding et coins arrondis.
Le formulaire en flex avec un gap, le champ prend toute la place restante (flex: 1).
#liste sans puces (list-style: none) et les li en flex, contenu écarté aux deux bouts.
Pour plus tard : li.faite span barré (line-through) et gris.

Indice

Pour centrer la carte : max-width: 420px et margin: 20px auto sur .app.

Indice

Flexbox sur #form-tache (display: flex; gap: 8px;) et flex: 1 sur le champ.

Indice

La liste :

#liste { list-style: none; padding: 0; }
#liste li { display: flex; justify-content: space-between; }
li.faite span { text-decoration: line-through; color: gray; }

L'interactivité en JavaScript

Pour les 3 dernières étapes, le HTML et le CSS sont prêts (onglets HTML et CSS). On se concentre sur le JS.

Étape 3 — Ajouter une tâche

À l'envoi du formulaire : empêche le rechargement.
Si le champ n'est pas vide (pense à .trim()), crée un li contenant un span avec le texte, et ajoute-le à #liste.
Vide le champ.

Indice

Écoute submit sur form, et empêche le rechargement avec e.preventDefault().

Indice

input.value.trim() retire les espaces au début et à la fin : si le résultat vaut "", arrête-toi avec return.

Indice

La fonction ajouterTache :

function ajouterTache(texte) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  span.textContent = texte;
  li.append(span);
  liste.append(li);
}

Étape 4 — Cocher et supprimer

Chaque tâche contient aussi un bouton ✕ de classe supprimer.
Un clic sur le span ajoute/retire la classe faite sur le li.
Un clic sur le bouton supprime le li.

Indice

Dans ajouterTache, crée un troisième élément : document.createElement("button"), avec le texte ✕ et la classe supprimer.

Indice

Un écouteur click sur le span (→ li.classList.toggle("faite")), un autre sur le bouton (→ li.remove()).

Indice

N’oublie pas d’insérer le bouton dans la tâche : li.append(span, bouton);

Étape 5 — Le compteur

Écris une fonction majCompteur() qui compte les tâches non faites et affiche 1 tâche restante ou 3 tâches restantes (avec le pluriel !). Appelle-la après chaque ajout, cochage et suppression.

Indice

liste.querySelectorAll("li:not(.faite)").length compte les tâches qui ne sont pas faites.

Indice

Pour le pluriel : const s = n > 1 ? "s" : ""; puis `${n} tâche${s} restante${s}`.

Indice

Appelle majCompteur() à 3 endroits : à la fin de ajouterTache, et dans chacun des deux écouteurs de clic.

const form = document.querySelector("#form-tache");
const input = document.querySelector("#nouvelle-tache");
const liste = document.querySelector("#liste");
const compteur = document.querySelector("#compteur");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const texte = input.value.trim();
  if (texte === "") return;
  ajouterTache(texte);
  input.value = "";
});

function ajouterTache(texte) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  span.textContent = texte;

const bouton = document.createElement("button");
  bouton.textContent = "✕";
  bouton.classList.add("supprimer");

span.addEventListener("click", () => {
    li.classList.toggle("faite");
    majCompteur();
  });
  bouton.addEventListener("click", () => {
    li.remove();
    majCompteur();
  });

li.append(span, bouton);
  liste.append(li);
  majCompteur();
}

function majCompteur() {
  const n = liste.querySelectorAll("li:not(.faite)").length;
  const s = n > 1 ? "s" : "";
  compteur.textContent = `${n} tâche${s} restante${s}`;
}

Bonus : sauvegarder les tâches

Recharge la page : tout disparaît ! Le navigateur offre un petit espace de stockage, localStorage, qui ne stocke que du texte. On convertit donc notre tableau avec JSON :

// Sauvegarder : tableau → texte
const taches = [...liste.querySelectorAll("li")].map(li => ({
  texte: li.querySelector("span").textContent,
  faite: li.classList.contains("faite"),
}));
localStorage.setItem("taches", JSON.stringify(taches));

// Charger au démarrage : texte → tableau
const sauvegarde = JSON.parse(localStorage.getItem("taches")) || [];
sauvegarde.forEach(t => ajouterTache(t.texte, t.faite));

Défi : appelle la sauvegarde dans majCompteur() (elle est déjà appelée à chaque changement !) et ajoute un paramètre faite à ajouterTache.

Et maintenant ?

Bravo, tu as les bases ! Pour continuer :

🛠️ Pratique

Recrée ce projet sur ton ordinateur dans trois fichiers : index.html, style.css, script.js (voir la leçon « Mon premier projet »).

💡 Idées de projets

Une calculatrice, un quiz, un jeu du « plus ou moins », une page portfolio responsive.

📚 Référence

MDN Web Docs : la documentation de référence, en français.

🚀 Publier

Mets ton site en ligne gratuitement avec GitHub Pages ou Netlify.

Tu es arrivé au bout du cours, bravo ! 🎉 Pour fêter ça, tu peux m'offrir un café ☕ : c'est le carburant officiel de ce cours… et la seule dépendance que je ne mettrai jamais à jour.

Ce que tu as mobilisé

HTML : formulaire, champ, liste, identifiants.
CSS : box model, flexbox, états (.faite).
JS : sélection, événements submit et click, création d'éléments, classList, fonctions.