Tuto Js

Tutoriel Comique: La Quête Épique de la
Liste de Tâches en JavaScript 📜✨

🎉 Description détaillé du projet
Partie 1: Mise en Place de l'Interface Utilisateur (UI)
Objectif: Créer une interface utilisateur simple pour ajouter et afficher des tâches.
Tâches:
- Créer un fichier HTML avec une structure de base.
- Ajouter un formulaire avec un champ de texte pour saisir la tâche et un bouton d'ajout.
- Créer une zone d'affichage pour lister les tâches ajoutées.
- Lier le fichier HTML à un fichier JavaScript externe.
Partie 2: Gestion des Tâches en JavaScript
Objectif: ajouter une fonctionnalité JavaScript pour gérer les tâches.
Tâches:
- Écrire une fonction JavaScript pour récupérer la valeur du champ de texte lorsqu'une
nouvelle tâche est soumise.
- Ajouter cette tâche à une liste en mémoire.
- Mettre à jour l'interface utilisateur pour afficher la liste des tâches.
- Ajouter des boutons ou des liens pour marquer les tâches comme complètes et les
supprimer de la liste.
Partie 3: Stockage Local et Améliorations
Objectif: ajouter la capacité de stocker les tâches localement et apporter des améliorations à
l'application.
Tâches:
- Utiliser le localStorage pour stocker les tâches localement.

- Charger les tâches depuis le stockage local lors du chargement de la page.
- Ajouter une fonctionnalité pour marquer les tâches comme complètes et les supprimer
du stockage local.
- Ajouter des fonctionnalités supplémentaires, telles que la possibilité de modifier le texte
d'une tâche.
Team Wommate
💡 GUIDE POUR LA RÉALISATION
Etape 1: Mise en Place du Terrain (HTML)
1. Créer le fichier (index.html)

- Tu vas maintenant ouvrir ton éditeur de texte et créer le fichier index.html. C’est à
toi de décider où tu vas le placer, dans quel dossier ? dans un nouveau projet ? …
?. T’es libre 🧑🏿‍🚀
- Voici la structure de base de notre code 👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma Liste de Tâches</title>
</head>
<body>
<div id="app">

</div>
<script src="app.js"></script>
</body>
</html>
Explications 🔦
● <!DOCTYPE html> : Cela indique au navigateur que nous utilisons la dernière version de
HTML.
Team Wommate
● <html lang="en"> : La balise d'ouverture pour l'élément HTML, avec une indication de
la langue (anglais).
● <head> : La section où vous placez des métadonnées comme le titre et l'encodage.
● <meta charset="UTF-8"> : Définit l'encodage des caractères à UTF-8.
● <meta name="viewport" content="width=device-width, initial-scale=1.0"> : Ajuste la
mise en page pour les appareils mobiles.
● <title>Ma Liste de Tâches</title> : Le titre de votre page.
● <body> : La balise d'ouverture pour le corps de votre page.
● <div id="app"> : Un conteneur où votre application JavaScript vivra.
● <script src="app.js"></script> : La liaison de votre fichier JavaScript.
Etape 2: Coder la logique avec JavaScript
1. Appeler le magicien (app.js) 😅

- Créez un nouveau fichier appelé app.js dans le même dossier que index.html.
- Copiez le code JavaScript ci-dessous dans ce app.js.
document.addEventListener('DOMContentLoaded', function () {
// C’est ici que nous allons coder notre logique
});
Explications 🔦
document.addEventListener('DOMContentLoaded', function () { :
● document : fait référence à l'objet DOM (Document Object Model), qui représente la
structure de la page web.
● addEventListener : une méthode qui permet d'attacher un gestionnaire d'événement à
un élément DOM.
Team Wommate
● DOMContentLoaded : l'événement qui se déclenche lorsque le document HTML a
été complètement chargé et analysé, sans attendre les feuilles de style, images et
sous-documents externes tels que les scripts.
function () { est une fonction anonyme (une fonction sans nom) qui sera exécutée lorsque
l'événement DOMContentLoaded se produira.
⚡⚠️ Avant que vous ne poursuiviez, lancez-vous dans le défi et complétez votre fichier
HTML.
NB: Pour l'étape suivante, nous allons récupérer le formulaire HTML ainsi que la balise qui
affichera les tâches dans notre code JavaScript.
2. Manipulation du DOM 🎮
- Dans notre bloc DOMContentLoaded, déclarons trois variables avec le mot clé const
(TaskForm, TaskInput, TaskList)
Pour les nuls en anglais Task veut dire Tâche 😅🧠
const taskForm = document.getElementById('form');
const taskInput = document.getElementById('input');
const taskList = document.getElementById('list');// balise ul
taskForm.addEventListener('submit', function (event) {

event.preventDefault();
const taskText = taskInput.value.trim();
😂
if (taskText !== '') {
alert(taskText) // vous permettra de voir
// à compléter (tu vas te débrouiller pour appeler la fonction

//addTask() qu’on va déclarer en bas pour ajouter une tâhce
taskInput.value = ''; // Réinitialiser le champ de texte

}
});
Team Wommate
Explications 🔦
● document.getElementById('form'): Récupère l'élément du DOM avec l'ID 'form' et
l'assigne à la variable taskForm.
● document.getElementById('input'): Récupère l'élément du DOM avec l'ID 'input' et
l'assigne à la variable taskInput.
● document.getElementById('list'): Récupère l'élément du DOM avec l'ID 'list' et l'assigne à
la variable taskList.
● taskForm.addEventListener('submit', function (event) { ... }): Attache un gestionnaire
d'événements à l'événement de soumission du formulaire identifié par taskForm.
La fonction anonyme fournie sera exécutée lorsque le formulaire est soumis.
● event.preventDefault(): Empêche le comportement par défaut du formulaire, qui

est généralement de recharger la page lorsque le formulaire est soumis. Cela
évite le rechargement de la page.
● const taskText = taskInput.value.trim();: Récupère la valeur du champ de texte (la
tâche à ajouter) en supprimant les espaces blancs inutiles à la fin et au début,
grâce à la méthode trim().
● if (taskText !== '') { ... }: Vérifie si le texte de la tâche n'est pas vide.
● alert(taskText): Affiche une boîte de dialogue avec le texte de la tâche. Dans cet
exemple, il s'agit d'une alerte, mais vous pourriez envisager d'utiliser cette
valeur pour effectuer d'autres actions, comme ajouter la tâche à la liste.
● taskInput.value = '';: Réinitialise le champ de texte après l'ajout de la tâche.
Etape 3: Coder la logique avec JavaScript 👉 Manier la logique tâches

Team Wommate
1. Ajouter une tâche
- Ajoutez une fonction addTask pour créer un nouvel élément dans la liste chaque fois que
l'utilisateur ajoute une tâche.
function addTask(taskText) {
const taskItem = document.createElement('li');
taskItem.textContent = taskText;
taskList.appendChild(taskItem);
🥰
// Tu devras appeler ici la fonction saveTasksToLocalStorage() pour
sauvegarder localement :: bon courage
}
Explications 🔦
function addTask(taskText) { : Déclare une fonction addTask avec un paramètre taskText.
const taskItem = document.createElement('li'); : Crée un élément <li> (élément de liste).
taskItem.textContent = taskText; : Définit le texte de l'élément de liste.
taskList.appendChild(taskItem); : Ajoute l'élément de liste à la liste existante.
2. Sauvegarder Localement (app.js)

- Jusque là, par la magie de JavaScript, nous arrivons à manipuler le DOM, en ajoutant des
éléments (tâches). Cool 😎 Mais … 😪 Si on actualise notre pages tout disparaît.
Pas de panique, la bonne nouvelle est qu’on a le localStorage comme arme ⚔️🤠
Allons-y soldat ! 🧑‍💻
C’est quoi le localStorage ? Json.Stringify ?
Le localStorage est comme une petite boîte spéciale où tu peux ranger des informations. 📦
Cependant, cette boîte ne peut contenir que des choses simples, comme des mots.
Team Wommate
Parfois, tu as des informations géniales, comme des messages ou des nombres, mais la
boîte ne les comprend pas directement.
C'est là que JSON.stringify entre en jeu ! Il transforme ces informations géniales en quelque
chose de simple que la boîte peut comprendre.
En gros, JSON.stringify prend tes choses spéciales, les rend compréhensibles pour la boîte, et tu
peux les ranger et les récupérer facilement. 🌟✨
- Maintenant ajoutez une fonction saveTasksToLocalStorage pour sauvegarder les tâches
localement. 👇
function saveTasksToLocalStorage() {
const tasks = Array.from(taskList.children).map(task =>
task.textContent);
localStorage.setItem('tasks', JSON.stringify(tasks));
}
Explications 🔦
● function saveTasksToLocalStorage() { : Déclare une fonction saveTasksToLocalStorage.
● const tasks = Array.from(taskList.children).map(task => task.textContent); : Convertit
les éléments de liste en un tableau de textes.
● localStorage.setItem('tasks', JSON.stringify(tasks)); : Stocke ce tableau dans le
localStorage, en le convertissant en chaîne JSON.
3. Récupérez les tâches depuis le localStorage (app.js)

- À l'intérieur du bloc DOMContentLoaded, ajoutez le code pour charger les tâches depuis
localStorage.
document.addEventListener('DOMContentLoaded', function () {
const savedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
savedTasks.forEach(taskText => addTask(taskText));
Team Wommate
});
● document.addEventListener('DOMContentLoaded', function () { : Attendez que le

document soit complètement chargé.
● const savedTasks = JSON.parse(localStorage.getItem('tasks')) || []; : Récupère les
tâches sauvegardées depuis le localStorage, en les convertissant de JSON à un tableau.
● savedTasks.forEach(taskText => addTask(taskText)); : Ajoute chaque tâche à la liste en
appelant la fonction addTask.
Génial ! 🥳 Améliore-le comme tu le souhaites 📜

N'hésite pas à m'écrire en cas de bugs 🤗✨
Team Wommate

Tuto Js

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Tuto Js

Transféré par

Droits d'auteur :

Formats disponibles

Tutoriel Comique: La Quête Épique de la

Liste de Tâches en JavaScript 📜✨

Partie 2: Gestion des Tâches en JavaScript

Objectif: ajouter une fonctionnalité JavaScript pour gérer les tâches.

- Utiliser le localStorage pour stocker les tâches localement.

1. Créer le fichier (index.html)

Etape 2: Coder la logique avec JavaScript

1. Appeler le magicien (app.js) 😅

taskForm.addEventListener('submit', function (event) {

// à compléter (tu vas te débrouiller pour appeler la fonction

taskInput.value = ''; // Réinitialiser le champ de texte

● event.preventDefault(): Empêche le comportement par défaut du formulaire, qui

Etape 3: Coder la logique avec JavaScript 👉 Manier la logique tâches

2. Sauvegarder Localement (app.js)

Allons-y soldat ! 🧑‍💻

C’est quoi le localStorage ? Json.Stringify ?

3. Récupérez les tâches depuis le localStorage (app.js)

● document.addEventListener('DOMContentLoaded', function () { : Attendez que le

Génial ! 🥳 Améliore-le comme tu le souhaites 📜

Vous aimerez peut-être aussi