✅ Application To-Do avec Vanilla JavaScript

« Pas de framework, pas d’excuse » 😎

Créer une application To-Do est un véritable rite d’initiation dans le monde JavaScript.
Toute personne qui en construit une peut dire fièrement :

« J’ai vraiment construit quelque chose avec JavaScript. » 👑

Parce que cette petite application t’apprend, étape par étape :

Ce qu’est le DOM et comment le contrôler
Comment fonctionnent les événements
Comment récupérer des données depuis l’utilisateur
Comment ajouter / supprimer des éléments d’une liste
Comment fonctionnent réellement les fonctions
Les bonnes habitudes de code propre

Alors oui…
Petit projet, énorme savoir.

🧠 D’abord la logique : comment pense une To-Do App ?

Avant d’écrire du code, on écrit des idées 🧠✍️

Voici le fonctionnement de l’application :

1️⃣ L’utilisateur écrit une tâche dans l’input
2️⃣ Il clique sur « Ajouter » (ou appuie sur Entrée)
3️⃣ La tâche apparaît dans la liste
4️⃣ La tâche peut être supprimée
5️⃣ L’utilisateur se sent productif 😌

C’est tout.
Pas de drama. JavaScript nous aime déjà 😄

🧱 HTML – Construisons le squelette (On bâtit une maison 🏠)

&lt;!DOCTYPE html>
&lt;html lang="fr">
&lt;head>
  &lt;meta charset="UTF-8" />
  &lt;title>To-Do App&lt;/title>
&lt;/head>
&lt;body>

  &lt;h1>📝 To-Do List&lt;/h1>

  &lt;input 
    type="text" 
    id="todoInput" 
    placeholder="Écris une tâche..." 
  />

  &lt;button id="addBtn">Ajouter&lt;/button>

  &lt;ul id="todoList">&lt;/ul>

  &lt;script src="script.js">&lt;/script>
&lt;/body>
&lt;/html>

🧠 Que fait ce HTML ?

input → l’utilisateur écrit une tâche
button → action « ajouter »
ul → parking des tâches
script.js → le cerveau 🧠

📌 Astuce :
Plus ton HTML est simple, plus ton JavaScript est heureux.

🎯 JavaScript commence : attrapons le DOM (La chasse commence 🏹)

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

🧠 Qu’a-t-on fait ici ?

On a présenté les éléments HTML à JavaScript
Maintenant JS dit :

« OK, je peux leur parler. »

📌 Règle d’or :
Si tu touches au DOM → attrape-le d’abord.

➕ Fonction d’ajout de tâche (Le cœur bat ici ❤️)

function addTodo() {
  const todoText = input.value.trim();

  if (todoText === "") {
    alert("Pas de tâche vide😄");
    return;
  }

  const li = document.createElement("li");
  li.textContent = todoText;

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

  deleteBtn.addEventListener("click", function () {
    li.remove();
  });

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

  input.value = "";
}

🔍 Détaillons doucement (On digère 🍽️)

`input.value.trim()`

Récupère le texte de l’utilisateur
trim() enlève les espaces inutiles
Empêche les tâches composées uniquement d’espaces 😎

Vérification du vide (Sauve des vies)

if (todoText === "") {
  alert("Pas de tâche vide");
  return;
}

📌 Pourquoi c’est important ?
Les utilisateurs font n’importe quoi.
Le code se protège.

Création de l’élément de liste

const li = document.createElement("li");
li.textContent = todoText;

🧠

Aucun HTML écrit
Élément créé dynamiquement avec JS
Manipulation du DOM 💥

Bouton Supprimer (Petit mais puissant)

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

Événement de suppression (La vraie magie 🪄)

deleteBtn.addEventListener("click", function () {
  li.remove();
});

🧠

Clique sur le bouton
La tâche disparaît 🕊️
remove() = suppression totale du DOM

Ajouter à la liste & vider l’input

li.appendChild(deleteBtn);
list.appendChild(li);
input.value = "";

📌 Expérience utilisateur = +10 points

🖱️ Exécuter au clic du bouton

addBtn.addEventListener("click", addTodo);

🧠

« Si on clique ici → fais ça »
Base de la logique événementielle

⌨️ BONUS : Ajouter avec la touche Entrée (Détail senior 😏)

input.addEventListener("keydown", function (e) {
  if (e.key === "Enter") {
    addTodo();
  }
});

📌 Petit détail
📌 Grande différence
📌 Utilisateur heureux 🥹

🧠 Ce que tu as appris (sans t’en rendre compte)

Maintenant tu :

✅ Comprends le DOM
✅ Utilises des event listeners
✅ Crées des éléments dynamiquement
✅ Écris des fonctions
✅ Récupères des données utilisateur
✅ Ajoutes & supprimes des éléments

Ce qui veut dire…
Tu as appris le vrai JavaScript.

🎨 Idées d’amélioration (Level Up 🎮)

Pousse le projet plus loin :

✔️ Marquer les tâches comme terminées
✔️ Sauvegarde avec LocalStorage
✔️ Animations CSS
✔️ Mode sombre
✔️ Compteur de tâches

Chaque idée = un nouvel article 😏

🧠 Super conseils (À sauvegarder ⭐)

Vanilla JS → fondations en béton
Petits projets → grande confiance
Dis « je l’ai fait », pas « je crois que j’ai compris »
Si tu fais ça, React ne te fera pas peur

💬 Conclusion (Du cœur au cœur 💙)

Cette To-Do App peut paraître petite…
mais c’est un énorme pas dans ton aventure JavaScript 🚀✨