✅ Votre premier projet JavaScript : créer une liste de tâches à partir de zéro

Vous venez de commencer votre parcours en programmation ? Prends tes aises et attache tes chaussons, ça va être amusant 😄
🤖 Dans application Code nous enseignons à écrire du code de manière conviviale : étape par étape, avec des projets, des conseils et de l'aide.
Et cette liste de tâches est l'un des premiers projets que vous allez certainement maîtriser ! 🚀

🚀 Pourquoi la liste de tâches est-elle le premier projet idéal ?

Liste des tâches est l'un des projets les plus simples et les plus populaires avec lequel tous ceux qui apprennent le développement Web commencent. Il permet d'acquérir les compétences les plus importantes :

• travail avec la structure HTML (DOM),

• interaction avec l'utilisateur (événements),

• logique, conditions et quelques cycles,

• et surtout, c'est amusant et visuel ! 🎯

De quoi avez-vous besoin ?

• HTML — pour définir la structure : champ de saisie, bouton, liste des tâches.

• CSS — pour la conception de base (peut être minimal).

• JavaScript — pour que tout fonctionne : ajout, clics, actions.

📦 Étape 1 : Mise en page (HTML)

Tout d'abord, nous créons une page HTML simple, où il y aura :

• champ de saisie d'une nouvelle tâche ;

• bouton pour l'ajouter à la liste ;

• liste vide, où les tâches apparaîtront.

C'est comme un bloc-notes vide dans lequel vous allez écrire des tâches, mais dans le navigateur.

<div class="todo-container">
  <h1>Мои задачи</h1>
  <input id="taskInput" type="text" placeholder="New task..." />
  <button id="addBtn">Добавить</button>
  <ul id="taskList"></ul>
</div>

🎨 Étape 2 : Styles (CSS)

Avec CSS, vous pouvez :

• définir les retraits et l'alignement ;

• rendre l'arrière-plan agréable ;

• arrondir les coins des éléments ;

• et simplement rendre votre application plus soignée.

Ce n'est pas une étape obligatoire, mais elle vous aide à vous sentir que vous faites ce produit, et pas seulement un ensemble de codes.

.todo-container {
  max-width: 400px;
  margin: auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 12px;
}

🧠 Étape 3 : JavaScript — animons !

C'est là que la partie la plus intéressante commence 💡

Nous allons « apprendre » au bouton à ajouter une tâche :

• Lorsque l'utilisateur clique sur le bouton, JavaScript prend le texte du champ de saisie.

• Crée un nouvel élément de la liste (li) et insère ce texte dedans.

• Ajoute cet élément à la liste (ul) sur la page.

Ensuite, nous « apprendrons » aux tâches à réagir au clic :

• Lorsque vous cliquez, la tâche sera barrée - nous montrerons ainsi qu'elle est terminée.

• En outre, vous pouvez la supprimer en double-cliquant.

Tout cela est fait avec gestionnaires d'événements — des fonctions spéciales qui répondent aux actions de l'utilisateur.

const addBtn = document.getElementById("addBtn");
const taskInput = document.getElementById("taskInput");
const taskList = document.getElementById("taskList");

addBtn.addEventListener("click", () => {
  const taskText = taskInput.value.trim();
  if (taskText === "") return;

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

  li.addEventListener("click", () => {
    li.classList.toggle("done");
  });

  taskList.appendChild(li);
  taskInput.value = "";
});

🧩 Mini-exercice : ajoutez la suppression de tâches

Essayez de finaliser le projet - ajouter la possibilité supprimer la tâche double-cliquez sur :

li.addEventListener("dblclick", () => {
  li.remove();
});

Votre liste de tâches est désormais encore plus pratique 💥

Nous serons heureux de vous voir dans l'application Codica, où apprendre la programmation est plus facile et plus rapide.

Et nous avons aussi Communauté Telegram, où vous pouvez poser des questions, montrer votre code et simplement trouver du soutien auprès de nouveaux arrivants et de développeurs expérimentés 👨‍💻👩‍💻

La programmation est intéressante, surtout quand on est à proximité Code et amis !