Salut codeur(euse) ! 👋
Tu veux créer une application qui te permettra de gérer tes tâches de manière stylée et efficace ? Parfait, car aujourd’hui, on va construire ensemble une application de gestion de tâches ! 📝 que tu pourras améliorer et customizer à ton aise et selon tes préférences. Il s’agit ici d’une application basique, un point de départ pour vous lancer dans un projet plus robuste.
Avec ce projet, tu vas pouvoir ajouter, modifier et supprimer des tâches comme un(e) pro, le tout en utilisant HTML, Bootstrap (pour un look cool sans se fatiguer), et JavaScript pour la logique. Prêt(e) à coder ? Let’s go !
Étape 1 : La Structure HTML 📄
On commence par le squelette de notre application avec un fichier HTML. Il va contenir :
- Un champ pour entrer de nouvelles tâches
- Un bouton pour ajouter des tâches
- Une liste qui va afficher toutes les tâches
Voici le code pour le fichier index.html. Colle-le dans ton éditeur de texte préféré (comme Visual Studio Code) :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>📝 Gestionnaire de Tâches</title>
<!-- Bootstrap 5 -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
>
<!-- FontAwesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
crossorigin="anonymous"
>
<link rel="stylesheet" href="style.css">
</head>
<body class="bg-light">
<div class="container py-5">
<h1 class="text-center mb-4">🗒️ Mon Gestionnaire de Tâches</h1>
<!-- Formulaire d'ajout -->
<div class="row justify-content-center mb-4">
<div class="col-md-8">
<div class="input-group shadow-sm">
<span class="input-group-text bg-white">
<i class="fas fa-smile-beam"></i>
</span>
<input
type="text"
id="taskInput"
class="form-control form-control-lg"
placeholder="Quelle est ta prochaine mission ?"
aria-label="Nouvelle tâche"
>
<button class="btn btn-primary btn-lg" id="addTaskButton" aria-label="Ajouter tâche">
<i class="fas fa-plus me-2"></i>Ajouter
</button>
</div>
</div>
</div>
<!-- Liste des tâches -->
<div class="row justify-content-center">
<div class="col-md-8">
<ul class="list-group" id="taskList"></ul>
</div>
</div>
</div>
<!-- Bootstrap Bundle (Popper + JS) -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
></script>
<script src="app.js"></script>
</body>
</html>
Explications
- En-tête
<head>:- On charge Bootstrap avec un lien CDN pour donner du style facilement.
- Container principal :
- On crée une
divavec la classe container de Bootstrap pour centrer notre contenu et ajouter de la marge en haut avecmt-5.
- On crée une
- Champ de saisie et bouton :
- Champ de texte : Là où on va entrer le texte de chaque tâche.
- Bouton Ajouter : Quand on clique dessus, une nouvelle tâche apparaît dans la liste.
- Liste des tâches :
- Un
<ul>avec l’IDtaskListpour afficher chaque tâche comme un élément de liste.
- Un
Étape 2 : La Magie JavaScript ✨
Place maintenant ce code dans un fichier app.js. Ce code va donner vie à ton application, en permettant d’ajouter, de modifier et de supprimer des tâches !
document.addEventListener("DOMContentLoaded", () => {
const taskInput = document.getElementById("taskInput");
const addTaskButton = document.getElementById("addTaskButton");
const taskList = document.getElementById("taskList");
const EMOJIS = ["😀","😎","😉","🔥","🚀","🌟","💡","🎉","✅","📌"];
let tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
renderTasks();
addTaskButton.addEventListener("click", addTask);
taskInput.addEventListener("keypress", e => {
if (e.key === "Enter") addTask();
});
function saveTasks() {
localStorage.setItem("tasks", JSON.stringify(tasks));
}
function addTask() {
const text = taskInput.value.trim();
if (!text) return;
const emoji = EMOJIS[Math.floor(Math.random()*EMOJIS.length)];
tasks.push({ text, emoji, done: false });
taskInput.value = "";
saveTasks();
renderTasks();
}
function toggleDone(idx) {
tasks[idx].done = !tasks[idx].done;
saveTasks();
renderTasks();
}
function editTask(idx) {
const newText = prompt("Modifier la tâche :", tasks[idx].text);
if (newText !== null && newText.trim()) {
tasks[idx].text = newText.trim();
saveTasks();
renderTasks();
}
}
function deleteTask(idx) {
if (confirm("Supprimer cette tâche ?")) {
tasks.splice(idx, 1);
saveTasks();
renderTasks();
}
}
function renderTasks() {
taskList.innerHTML = "";
tasks.forEach((task, idx) => {
const li = document.createElement("li");
li.className = `list-group-item ${task.done ? "completed" : ""}`;
// Emoji + texte cliquable
const leftDiv = document.createElement("div");
leftDiv.className = "d-flex align-items-center";
const spanEmoji = document.createElement("span");
spanEmoji.className = "task-emoji";
spanEmoji.textContent = task.emoji;
const textSpan = document.createElement("span");
textSpan.className = "task-text";
textSpan.textContent = task.text;
textSpan.style.cursor = "pointer";
textSpan.addEventListener("click", () => toggleDone(idx));
leftDiv.append(spanEmoji, textSpan);
// Boutons d’action
const btnGroup = document.createElement("div");
btnGroup.className = "btn-actions";
const btnDone = document.createElement("button");
btnDone.className = "btn btn-complete btn-sm";
btnDone.innerHTML = `<i class="fas fa-check me-1"></i>OK`;
btnDone.title = "Terminer";
btnDone.addEventListener("click", () => toggleDone(idx));
const btnEdit = document.createElement("button");
btnEdit.className = "btn btn-edit btn-sm";
btnEdit.innerHTML = `<i class="fas fa-pen me-1"></i>Mod`;
btnEdit.title = "Modifier";
btnEdit.addEventListener("click", () => editTask(idx));
const btnDelete = document.createElement("button");
btnDelete.className = "btn btn-delete btn-sm";
btnDelete.innerHTML = `<i class="fas fa-trash me-1"></i>Sup`;
btnDelete.title = "Supprimer";
btnDelete.addEventListener("click", () => deleteTask(idx));
btnGroup.append(btnDone, btnEdit, btnDelete);
li.append(leftDiv, btnGroup);
taskList.appendChild(li);
});
}
});
Explications en Détail
- Initialisation des éléments : On utilise
document.getElementById()pour accéder à notre champ de saisie (taskInput), au bouton “Ajouter” (addTaskButton) et à la liste des tâches (taskList). - Fonction
addTask:- On prend la valeur saisie par l’utilisateur et vérifie qu’elle n’est pas vide.
- Ensuite, on crée un élément
<li>pour cette tâche avec des classes Bootstrap pour le style. - Pour permettre à chaque tâche d’être modifiée ou supprimée, on crée des boutons “Modifier” et “Supprimer” qu’on ajoute à notre élément
<li>.
- Fonction
editTask: Cette fonction utiliseprompt()pour afficher une boîte de dialogue permettant de saisir un nouveau texte pour la tâche. Une fois validé, le texte de la tâche est mis à jour. - Fonction
deleteTask: Supprime l’élément<li>correspondant à la tâche, en utilisantremoveChild.
Maintenant, enregistrez votre fichier JavaScript sous le nom app.js et ouvrez index.html dans votre navigateur. Vous devriez voir un champ pour ajouter des tâches, un bouton pour les ajouter à la liste, et chaque tâche avec des boutons pour la modifier ou la supprimer.
Et voilà ! 🎉 Vous venez de créer votre propre application de gestion de tâches en HTML, Bootstrap et JavaScript. Entraînez-vous, jouez avec les styles et personnalisez comme bon vous semble !
