📝 La logique d’une Todo List en JavaScript

ans framework, JavaScript pur, version qui ouvre le cerveau

Dans la vie d’un développeur, certaines vérités sont inévitables :

• console.log est partout
• Un jour, tu te disputeras avec undefined
• Et…
  👉 Tu feras au moins une fois une Todo List

Mais cet article n’est pas :
❌ une Todo “copier–coller”
❌ une fuite derrière un framework
✅ un guide qui t’apprend vraiment comment JavaScript réfléchit

🧠 1. Todo List = Petite application, grande leçon

Une Todo List paraît simple, mais elle cache :

• La récupération de données utilisateur
• Le stockage des données en mémoire (state)
• La mise à jour de l’écran (render)
• La gestion des événements (events)

En réalité, une Todo List, c’est :

« Voir le cœur de JavaScript à travers une petite application. »

🧩 2. D’abord la logique : comment fonctionne une Todo List ?

Avant d’écrire du code, réfléchissons 🧠

Une Todo List fait ceci :

1️⃣ L’utilisateur écrit une tâche
2️⃣ Il clique sur « Add »
3️⃣ La tâche entre dans la liste
4️⃣ Il peut la marquer comme terminée
5️⃣ Il peut la supprimer

Côté JavaScript, il y a cette boucle :

UTILISATEUR → ÉVÉNEMENT → STATE → RENDER → ÉCRAN

Si tu comprends ça, tu es déjà à mi-chemin.

🧱 3. HTML : installer le décor (ni trop, ni trop peu)

Le HTML n’est que le squelette.
Les développeurs malins laissent le vrai travail à JavaScript 😄

<input type="text" id="todoInput" placeholder="Write a task..." />
<button id="addBtn">Add</button>

<ul id="todoList"></ul>

🧠 Qu’est-ce qu’on a ici ?

• input → l’endroit où l’on écrit la tâche
• button → le bouton qui déclenche l’action
• ul → la vitrine où les tâches s’affichent

Quand le HTML est simple :

• JavaScript respire
• Le code est lisible
• Le debug est plus facile

📦 4. Le concept de State : où stocker les todos ?

C’est le point le plus critique 🔥

On ne stocke pas les todos dans le DOM,
on les stocke dans la mémoire de JavaScript.

const todos = [];

❓ Pourquoi un tableau (array) ?

• Ordonné
• Dynamique
• Facile à gérer

❓ Pourquoi const ?

• Le tableau garde la même référence
• Impossible d’écrire par erreur todos = null
• Code plus sûr

📌 Règle d’or :
Le DOM est temporaire, le state est permanent.

🎣 5. Récupérer les éléments du DOM (les yeux et les oreilles de JS)

On dit à JavaScript :

« Voilà les éléments avec lesquels on va parler. »

const input = document.getElementById("todoInput");
const button = document.getElementById("addBtn");
const list = document.getElementById("todoList");

Maintenant :

• input.value → ce que l’utilisateur a écrit
• list → la maison des tâches

➕ 6. Ajouter une Todo : là où l’action commence

Place à l’action 🎬

button.addEventListener("click", () => {
  const todoText = input.value.trim();

  if (todoText === "") return;

  todos.push({
    text: todoText,
    completed: false
  });

  input.value = "";
  renderTodos();
});

🧠 Explication amusante, ligne par ligne :

addEventListener("click")
➡ L’utilisateur clique
➡ JS : « Reçu ! »

input.value.trim()
➡ Supprime les espaces au début et à la fin
➡ Pas de todo vide

if (todoText === "") return;

➡ Tâche vide = poubelle
➡ UX sauvé 🎉

todos.push({ ... })

➡ On stocke des objets, pas de simples strings
➡ Structure prête pour l’avenir

renderTodos()
➡ Ordre donné : « Mets à jour l’écran ! »

🔁 7. La logique de rendu : tout redessiner (partie la plus importante)

La plus grosse erreur dans les Todo Lists :

« Tripoter le DOM élément par élément »

Nous, on ne fait pas ça 😎
On redessine tout.

function renderTodos() {
  list.innerHTML = "";

  todos.forEach((todo, index) => {
    const li = document.createElement("li");
    li.textContent = todo.text;

    if (todo.completed) {
      li.style.textDecoration = "line-through";
    }

    li.addEventListener("click", () => {
      toggleTodo(index);
    });

    const deleteBtn = document.createElement("button");
    deleteBtn.textContent = "❌";

    deleteBtn.addEventListener("click", (e) => {
      e.stopPropagation();
      deleteTodo(index);
    });

    li.appendChild(deleteBtn);
    list.appendChild(li);
  });
}

🧠 Que se passe-t-il ici ?

• innerHTML = "" → on nettoie l’écran
• forEach → on redessine chaque todo
• index → on sait exactement laquelle on manipule
• Click → compléter ou supprimer

📌 Cette logique est l’ancêtre de :

• React
• Vue
• Angular

❌ 8. Supprimer une Todo (simple et propre)

function deleteTodo(index) {
  todos.splice(index, 1);
  renderTodos();
}

🧠 Que fait splice ?

• Commence à index
• Supprime 1 élément
• Met à jour le tableau

Ensuite :
➡ re-render
➡ écran à jour

✅ 9. Compléter une Todo (UX qui monte d’un niveau)

function toggleTodo(index) {
  todos[index].completed = !todos[index].completed;
  renderTodos();
}

🧠 Logique très simple :

• true → false
• false → true

Mais gros effet :

• Retour visuel immédiat
• Utilisateur content
• Application « vivante »

💡 10. Conseils pro (or pur)

✔ Ne stocke jamais le state dans le DOM
✔ Fais du render le centre de tout
✔ Écris des fonctions courtes
✔ « Si quelque chose change → render »
✔ Apprends JavaScript avant les frameworks

🧠 11. Qu’as-tu vraiment appris avec ce projet ?

Cette Todo List t’a appris :

• La manipulation du DOM
• La gestion des événements
• La gestion du state
• L’utilisation des tableaux et objets
• La synchronisation UI ↔ données

Avec ça :

• React devient plus facile
• Ton niveau de debug augmente
• Tu abandonnes les réflexes “junior”

🚀 Mot de la fin

Créer une Todo List sans framework, c’est :

• pas difficile
• extrêmement formateur
• vraiment valorisant

Et ça te fait dire :

« Je comprends vraiment JavaScript. »