Fichier index.
html
Corps du document (<body>)
<body class="bg-success">
<div class="container mt-5">
<div class="card shadow-sm p-4">
<h2 class="text-center mb-4"> Ma Liste de Tâches</h2>
Explica<on :
• class="bg-success" → applique un fond vert clair (classe Bootstrap).
• <div class="container mt-5"> → crée une zone centrée avec une marge supérieure (mt-5).
• <div class="card shadow-sm p-4"> → affiche le contenu dans une carte blanche avec ombre.
• <h2> → Mtre centré avec marge inférieure (mb-4).
Le formulaire pour ajouter une tâche
<form id="taskForm" class="mb-3">
<div class="input-group">
<input type="text" id="taskInput" class="form-control" placeholder="Entrez une tâche...">
<buTon id="addBtn" class="btn btn-primary" type="submit">Ajouter</buTon>
</div>
</form>
Explica<on :
• <form> → permet de regrouper le champ texte et le bouton.
L’avantage d’uMliser un formulaire est que l’uMlisateur peut aussi appuyer sur "Entrée" pour
ajouter une tâche.
• id="taskForm" → idenMfiant du formulaire (uMle pour le relier au script JavaScript).
• input type="text" → champ de saisie.
o id="taskInput" → servira à récupérer la valeur saisie.
o class="form-control" → applique le style Bootstrap.
o placeholder → affiche un texte grisé pour indiquer quoi faire.
• buNon type="submit" → bouton pour valider le formulaire.
o btn btn-primary → bouton bleu (style Bootstrap).
Message d’erreur caché
<div id="errorMsg" class="alert alert-danger py-2" role="alert" style="display: none;">
Veuillez entrer une tâche !
</div>
Explica<on :
• id="errorMsg" → permet de le contrôler avec JavaScript.
• class="alert alert-danger" → affiche une alerte rouge (style Bootstrap).
• style="display: none;" → caché au départ.
• Le message s’affichera seulement si l’uMlisateur clique sur "Ajouter" sans rien écrire.
Liste des tâches
<ul id="taskList" class="list-group"></ul>
Explica<on :
• <ul> → liste non ordonnée.
• id="taskList" → l’endroit où les tâches seront ajoutées dynamiquement avec JavaScript.
• class="list-group" → applique le style Bootstrap à la liste.
Script JavaScript
<script src="[Link]"></script>
Explica<on :
• Le code JavaScript qui gère l’ajout des tâches, la validaMon et l’affichage du message d’erreur
se trouve dans le fichier [Link].
• Ce fichier sera chargé à la fin du document, pour s’assurer que tout le HTML est déjà présent
avant l’exécuMon.
Fichier [Link]
Objec<f du script
Ce script rend interac<ve la page HTML :
• Il permet d’ajouter une tâche à une liste.
• Il affiche un message d’erreur si le champ est vide.
• Il permet aussi de supprimer une tâche de la liste.
Récupéra<on des éléments du DOM
const form = [Link]('taskForm');
const input = [Link]('taskInput');
const list = [Link]('taskList');
const error = [Link]('errorMsg');
Explica<on :
• On u%lise [Link]() pour récupérer les éléments HTML par leur iden%fiant (id).
• Ces variables nous permeTront de manipuler le contenu de la page :
o form → le formulaire contenant le champ et le bouton.
o input → le champ texte où l’uMlisateur écrit la tâche.
o list → la liste <ul> où les tâches seront ajoutées.
o error → le message d’erreur caché.
Fonc<on d’affichage d’erreur
funcMon showError(msg) {
[Link] = msg;
[Link] = 'block';
[Link]('is-invalid');
// Cacher après 3 secondes
setTimeout(() => {
[Link] = 'none';
[Link]('is-invalid');
}, 3000);
}
Explica<on :
• showError(msg) : foncMon qui affiche un message d’erreur pendant 3 secondes.
• [Link] = msg : affiche le texte d’erreur dans la <div> rouge.
• [Link] = 'block' : rend le message visible.
• [Link]('is-invalid') : ajoute une bordure rouge au champ (style Bootstrap).
• setTimeout(...) : exécute une acMon après un délai.
o Après 3 secondes (3000 ms), on cache le message et on enlève la bordure rouge.
Remarque :
setTimeout est une fonc<on asynchrone très u<le pour temporiser une ac<on.
Fonc<on pour ajouter une tâche
funcMon addTask(taskText) {
const li = [Link]('li');
[Link] = 'list-group-item d-flex jusMfy-content-between align-items-center';
[Link] = taskText;
const delBtn = [Link]('buTon');
[Link] = 'btn btn-sm btn-danger';
[Link] = 'buTon';
[Link] = 'Supprimer';
[Link]('click', () => {
[Link]();
});
[Link](delBtn);
[Link](li);
}
Explica<on étape par étape :
1. Créer un nouvel élément <li>
o [Link]('li') → crée un élément de liste.
o [Link] = taskText → y met le texte de la tâche.
o [Link] = ... → ajoute les classes Bootstrap pour un joli style.
2. Créer le bouton "Supprimer"
o [Link]('buTon') → crée le bouton.
o className = 'btn btn-sm btn-danger' → style Bootstrap (peMt bouton rouge).
o textContent = 'Supprimer' → texte du bouton.
3. Supprimer la tâche au clic
o [Link]('click', () => { [Link](); });
o Quand on clique sur le bouton, l’élément <li> correspondant est reMré du DOM.
4. Assembler le tout
o [Link](delBtn) → insère le bouton dans la ligne de tâche.
o [Link](li) → ajoute la tâche dans la liste <ul>.
Remarque :
CeTe foncMon montre bien la manipula<on dynamique du DOM : on crée, modifie et insère des
éléments directement en JavaScript.
Ges<on de la soumission du formulaire
[Link]('submit', (e) => {
[Link](); // empêche le rechargement de la page
const task = [Link]();
if (task === '') {
showError('Veuillez entrer une tâche !');
[Link]();
return;
}
addTask(task);
[Link] = '';
[Link]();
});
Explica<on :
1. [Link]('submit', ...)
o On surveille l’événement “soumission du formulaire” (clic sur “Ajouter” ou touche
Entrée).
2. [Link]()
o Empêche le comportement par défaut du formulaire (qui recharge la page).
o Cela permet de garder la liste à l’écran.
3. [Link]()
o Récupère le texte saisi dans le champ et supprime les espaces inu<les.
4. Condi<on : champ vide
o Si le texte est vide → on appelle showError() pour afficher le message d’erreur.
o On redonne le focus sur le champ de saisie ([Link]()).
5. Si tout va bien :
o On appelle addTask(task) pour ajouter la tâche à la liste.
o Puis on vide le champ ([Link] = '') et on remet le curseur dedans.