Les fonctions de JS
1. Marquer une tâche comme terminée
o Ajoutez une case à cocher à chaque tâche pour indiquer qu'elle est terminée.
o Les tâches terminées doivent être affichées avec un style différent (par exemple,
barré ou grisé).
o Implémentez une méthode pour basculer l'état d'une tâche (completed: true/false).
1 function toggleTaskCompletion(id) {
2 const task = [Link](t => [Link] === id);
3 if (!task) return;
4
5 [Link] = ![Link];
6 renderTasks();
7 }
Modification de renderTasks :
1 function renderTasks() {
2 const taskList = [Link]('taskList');
3 [Link] = '<h2>Liste des Tâches</h2>';
4 [Link](task => {
5
6 const taskItem = [Link]('div');
7 [Link] = 'task-item';
8 [Link] = [Link] ? 'line-through' :
'none';
9
10 [Link] = `
11 <input type="checkbox" ${[Link] ? 'checked' : ''}
onclick="toggleTaskCompletion(${[Link]})">
12 <span>${[Link]}</span>
13 14
onclick="handleUpdateTask(${[Link]})">Modifier</button>
<div>
<button
15 <button
onclick="handleDeleteTask(${[Link]})">Supprimer</button>
16 17 </div>
`;
1 | Page
18 [Link](taskItem);
19 });
20 }
2. Filtrage des tâches
o Ajoutez des boutons ou un menu déroulant pour afficher :
▪ Toutes les tâches. Les
▪ tâches terminées. Les
▪ tâches en cours.
1 function filterTasks(filter) {
2 const filteredTasks = [Link](task => {
3 if (filter === 'completed') return [Link];
4 if (filter === 'incomplete') return ![Link];
5 return true; // Tous les filtres
6 });
7 renderFilteredTasks(filteredTasks);
8 }
9 function renderFilteredTasks(filteredTasks) {
10
11 const taskList = [Link]('taskList');
12 [Link] = '<h2>Liste des Tâches</h2>';
13 [Link](task => {
14
15 const taskItem = [Link]('div');
16 [Link] = 'task-item';
17 [Link] = `
18 <span>${[Link]}</span>
19 <div>
20 <button
onclick="handleUpdateTask(${[Link]})">Modifier</button>
21 <button
onclick="handleDeleteTask(${[Link]})">Supprimer</button>
22 23 24 25 26 </div>
`;
[Link](taskItem);
});
}
HTML associé :
1 <select id="taskFilter" onchange="filterTasks([Link])">
2 <option value="all">Toutes les tâches</option>
3 <option value="completed">Terminées</option>
4 <option value="incomplete">En cours</option>
5 </select>
2 | Page
3. Recherche en temps réel
o Ajoutez une barre de recherche permettant de filtrer les tâches en fonction de leur
titre.
o Utilisez un événement input pour afficher instantanément les résultats.
1 function searchTasks(query) {
2 const searchQuery = [Link]();
3 const filteredTasks = [Link](task =>
[Link]().includes(searchQuery));
4 renderFilteredTasks(filteredTasks);
5 }
HTML associé :
1 <input type="text" id="searchBar" placeholder="Rechercher..."
oninput="searchTasks([Link])">
4. Gestion des priorités
o Ajoutez une propriété priority à chaque tâche (ex : faible, moyenne, élevée).
o Permettez à l'utilisateur de définir la priorité lors de l'ajout ou la modification d'une
tâche.
o Implémentez une fonction pour trier les tâches par priorité.
1 function sortTasksByPriority() {
2 [Link]((a, b) => {
3 const priorityOrder = { 'low': 1, 'medium': 2, 'high': 3 };
4 return priorityOrder[[Link]] - priorityOrder[[Link]];
5 });
6 renderTasks();
7 }
Modification lors de l’ajout de tâches :
1
async function handleAddTask() {
2 3 4 5 const
6 7 8taskTitle
9 10 taskPriority,
= [Link]('taskTitle').value;
completed:
const
false
taskPriority
}; = [Link]('taskPriority').value;
if (!taskTitle) {
alert("Le titre de la tâche est requis !");
return;
}
const newTask = { id: [Link] + 1, title: taskTitle, priority:
11 12 13try {
14 15 16 const task = await simulateApiCall(newTask);
le champ [Link](task);
17 18 19 sortTasksByPriority();
20 21 renderTasks();
[Link]('taskTitle').value = ''; // Réinitialiser
alert("Tâche ajoutée avec succès !");
} catch (error) {
alert(error);
}
}
3 | Page
HTML associé :
1 <select id="taskPriority">
2 <option value="low">Faible</option>
3 <option value="medium">Moyenne</option>
4 <option value="high">Élevée</option>
5 </select>
5. Sauvegarde des tâches dans le stockage local
o Utilisez localStorage pour sauvegarder la liste des tâches afin de les récupérer
après un rechargement de la page.
o Implémentez une méthode pour charger les tâches à partir du localStorage au
démarrage de l'application.
1 function saveToLocalStorage() {
2 [Link]('tasks', [Link](tasks));
3 }
4 function loadFromLocalStorage() {
5
6 const savedTasks = [Link]([Link]('tasks')) || [];
7 tasks = savedTasks;
8 renderTasks();
9 }
10 // Appeler au chargement
11 [Link] = loadFromLocalStorage;
12
6. Mode "Dark Mode"
o Ajoutez un bouton pour basculer entre un thème clair et un thème sombre.
o Utilisez JavaScript pour modifier dynamiquement le style du site.
1 function toggleDarkMode() {
2 [Link]('dark-mode');
3 }
CSS associé :
1 .dark-mode {
2 background-color: #121212;
3 color: #ffffff;
4 }
HTML associé :
1 <button onclick="toggleDarkMode()">Activer/Désactiver Mode Sombre</button>
4 | Page
7. Drag-and-Drop
o Implémentez une fonctionnalité de glisser-déposer pour réorganiser les tâches.
o Permettez à l'utilisateur de changer l'ordre des tâches en les déplaçant avec la souris.
HTML associé :
1 <ul id="taskList">
2 <!-- Les tâches sont générées dynamiquement --> <li
3 class="task-item" draggable="true">Tâche 1</li> <li
4 class="task-item" draggable="true">Tâche 2</li> <li
5 class="task-item" draggable="true">Tâche 3</li>
6 </ul>
CSS (pour visuels Drag-and-Drop) :
1
.task-item {
2
padding: 10px; margin: 5px
3
0; background-color:
4
#f9f9f9; border: 1px solid
5
#ddd; border-radius: 4px;
6
cursor: grab;
7
8
}
9
.[Link] {
10
opacity: 0.5;
11
background-color: #d1e7dd;
12
13
14 }
15 .[Link]-over {
16
17 border: 2px dashed #4caf50;
}
JavaScript :
1 let draggedTask = null;
2
3 function enableDragAndDrop() {
4 const taskItems = [Link]('.task-item');
5 [Link](task => {
6
7 // Déclenché au début du drag
8 [Link]('dragstart', (e) => {
9 draggedTask = task;
10 [Link]('dragging');
11 });
12
13 // Déclenché lorsque le drag se termine
14 [Link]('dragend', () => {
15 [Link]('dragging');
16 draggedTask = null;
17 });
18
19 // Permet le dragover
20 [Link]('dragover', (e) => {
21 [Link](); // Nécessaire pour permettre le drop
22 [Link]('drag-over');
23 });
24
25 // Déclenché lorsqu'un élément est lâché
5 | Page
26 [Link]('dragleave', () => {
27 [Link]('drag-over');
28 });
29 [Link]('drop', (e) => {
30
31 [Link]();
32 [Link]('drag-over');
33
34 // Réorganiser les tâches
35 const taskList = [Link]('taskList');
36 if (draggedTask && draggedTask !== task) {
37 const tasksArray = [Link]([Link]);
38 const draggedIndex = [Link](draggedTask);
39 const targetIndex = [Link](task);
40 // Réorganiser dans le DOM
41 if (draggedIndex < targetIndex) {
42
43 [Link](draggedTask, [Link]);
44 } else {
45 [Link](draggedTask, task);
46 }
47
48 // Mettre à jour les données internes si nécessaire
49 updateTaskOrder();
50 }
51 });
52 });
53 }
54
55 // Appeler la fonction après avoir généré les tâches dynamiquement
56 enableDragAndDrop();
57
58 // Mettre à jour l'ordre des tâches dans les données internes
59 function updateTaskOrder() {
60 const taskItems = [Link]('.task-item');
61 tasks = [Link](taskItems).map((task, index) => {
62 return { ...tasks[index], title: [Link]() };
63 });
64 [Link]('Nouvel ordre des tâches :', tasks);
65 }
6 | Page
8. Ajout de sous-tâches
o Ajoutez une fonctionnalité permettant de créer des sous-tâches associées à une
tâche principale.
o Affichez les sous-tâches sous leur tâche principale, avec des options pour les
marquer comme terminées ou les supprimer.
Modifier la structure des données
Les tâches doivent contenir une propriété
, qui est un tableau de sous-tâches.
1 2 3 4 5 6 7 8 9 10 11 12 13 14sub tas ks
15 16 17
let tasks = [
{
id: 1,
title: "Tâche principale 1",
completed: false,
subtasks: [
{ id: 1, title: "Sous-tâche 1.1", completed: false },
{ id: 2, title: "Sous-tâche 1.2", completed: true }
]
},
{
id: 2,
title: "Tâche principale 2",
completed: false,
subtasks: []
}
];
Ajouter une interface utilisateur pour gérer les sous-tâches
• Ajouter un bouton "Ajouter une sous-tâche" sous chaque tâche principale.
• Afficher les sous-tâches sous forme de liste imbriquée.
1 <div id="taskList">
2 <!-- Exemple d'affichage dynamique -->
3 <div class="task-item">
4 <span>Tâche principale 1</span>
5 <button onclick="addSubtask(1)">Ajouter une sous-tâche</button>
6 <ul>
7 <li>Sous-tâche 1.1</li>
8 <li>Sous-tâche 1.2</li>
9 </ul>
10 </div>
11 </div>
Ajouter la logique pour gérer les sous-tâches
• Ajouter une sous-tâche
1 function addSubtask(taskId) {
2 const subtaskTitle = prompt("Entrez le titre de la sous-tâche :");
3 if (!subtaskTitle) return;
4 const task = [Link](t => [Link] === taskId);
5 if (!task) return;
6 const newSubtask = {
7
8
9 id: [Link] + 1,
7 | Page
10 title: subtaskTitle,
11 completed: false
12 };
13 [Link](newSubtask);
14 renderTasks();
15
16 }
• Marquer une sous-tâche comme terminée
1 function toggleSubtaskCompletion(taskId, subtaskId) {
2 const task = [Link](t => [Link] === taskId);
3 if (!task) return;
4 const subtask = [Link](st => [Link] === subtaskId);
5 if (!subtask) return;
6 [Link] = ![Link];
7 renderTasks();
8
9
10 }
• Supprimer une sous-tâche
1 function deleteSubtask(taskId, subtaskId) {
2 const task = [Link](t => [Link] === taskId);
3 if (!task) return;
4 [Link] = [Link](st => [Link] !== subtaskId);
5 renderTasks();
6
7 }
Affichage dynamique des sous-tâches
Modifier la fonction renderTasks pour afficher les sous-tâches sous chaque tâche principale.
function renderTasks()
1 {
2
const taskList = [Link]('taskList');
3
[Link] = '';
4
[Link](task => {
5
const taskItem = [Link]('div');
6
[Link] = 'task-item';
7
// Affichage de la tâche principale
8
[Link] = `
9
10
11 <span>${[Link]}</span>
12 <button onclick="addSubtask(${[Link]})">Ajouter une sous-
tâche</button>
13 14 15 16`;17 18
19 through' :
'none'; // Liste des sous-tâches
const subtaskList = [Link]('ul');
[Link](subtask => {
const subtaskItem = [Link]('li');
[Link] = [Link] ? 'line-
20 21 ''} [Link] = `
${[Link]})"> <input type="checkbox" ${[Link] ? 'checked' :
onclick="toggleSubtaskCompletion(${[Link]},
8 | Page
23 ${[Link]}
24 <button onclick="deleteSubtask(${[Link]},
${[Link]})">Supprimer</button>
25 `;
26 [Link](subtaskItem);
27 });
28 [Link](subtaskList);
29 [Link](taskItem);
30
31 });
32 }
9. Export des tâches
o Ajoutez un bouton pour exporter la liste des tâches au format JSON ou CSV.
o Fournissez un fichier téléchargeable contenant les données des tâches.
Ajout d'un bouton d'exportation
Ajouter un bouton permettant de choisir le format d'exportation.
1 <div>
2 <button onclick="exportTasks('json')">Exporter en JSON</button>
3 <button onclick="exportTasks('csv')">Exporter en CSV</button>
4 </div>
Fonction pour exporter les tâches au format JSON
Cette fonction convertit les données des tâches en chaîne JSON et génère un fichier téléchargeable.
1 function exportTasks(format) {
2 if (format === 'json') {
3 const jsonData = [Link](tasks, null, 2);
4 downloadFile('[Link]', jsonData, 'application/json');
5 } else if (format === 'csv') {
6 const csvData = convertTasksToCSV(tasks);
7 downloadFile('[Link]', csvData, 'text/csv');
8 }
9 }
Génération et téléchargement du fichier
Cette fonction crée un fichier à partir des données et déclenche son téléchargement.
1 function downloadFile(filename, content, mimeType) {
2 const blob = new Blob([content], { type: mimeType });
3 const link = [Link]('a');
4 [Link] = [Link](blob);
5 [Link] = filename;
6 [Link]();
7 [Link]([Link]); // Libérer la mémoire
8 }
Conversion des tâches au format CSV
Créer une fonction pour convertir les données des tâches en format CSV.
1 function convertTasksToCSV(tasks) {
2 const headers = ['ID', 'Titre', 'Terminé', 'Sous-tâches'];
3 const rows = [Link](task => {
4 const subtasks = [Link]
5 .map(subtask => `${[Link]} (${[Link] ?
'Terminé' : 'En cours'})`)
9 | Page
6 .join('; ');
7 return `${[Link]},${[Link]},${[Link] ? 'Oui' :
'Non'},"${subtasks}"`;
8 });
9 return [[Link](','), ...rows].join('\n');
10
11 }
10. Notifications
o Ajoutez une option pour configurer un rappel sur une tâche (par exemple, avec une
date/heure).
o Utilisez les API de notification de navigateur pour envoyer des rappels aux
utilisateurs.
Ajouter une interface utilisateur pour configurer un rappel
Inclure une option pour définir une date et une heure de rappel.
1
2
3 <div id="taskList">
4 <!-- Exemple pour une tâche -->
5 <div class="task-item">
6 <span>Tâche principale 1</span>
7 <label for="reminder">Rappel :</label>
8 <input type="datetime-local" id="reminder-1" />
9 <button onclick="setReminder(1)">Configurer</button>
</div>
</div>
Stocker les rappels pour chaque tâche
Ajouter une propriété reminder à chaque tâche pour enregistrer la date/heure du rappel.
1 let tasks = [
2 {
3 id: 1,
4 title: "Tâche principale 1",
5 completed: false,
6 reminder: null, // Date/heure du rappel
7 subtasks: []
8 },
9 {
10 id: 2,
11 title: "Tâche principale 2",
12 completed: false,
13 reminder: null,
14 subtasks: []
15 }
16 ];
10 | Page
Implémenter la logique pour configurer un rappel
Créer une fonction permettant de configurer un rappel et d'enregistrer la date dans l'objet
tasks.
1 function setReminder(taskId) {
2 const task = [Link](t => [Link] === taskId);
3 if (!task) return;
4 const reminderInput = [Link](`reminder-${taskId}`);
5 const reminderTime = new Date([Link]);
6 if (isNaN([Link]())) {
7
8
9 alert("Veuillez entrer une date/heure valide.");
10 return;
11 }
12 [Link] = reminderTime;
13 alert(`Rappel configuré pour ${[Link]} à
14
${[Link]()}`);
15 16 17
scheduleNotification(taskId, reminderTime);
}
Planifier les notifications
Utiliser setTimeoutpour déclencher une notification au moment configuré.
1 function scheduleNotification(taskId, reminderTime) {
2 const now = new Date();
3 // Calculer le délai avant la notification
4 const delay = [Link]() - [Link]();
5 if (delay <= 0) {
6
7 alert("La date/heure doit être dans le futur.");
8 return;
9 }
10 setTimeout(() => {
11
12 const task = [Link](t => [Link] === taskId);
13 if (!task) return;
14 showNotification(`Rappel pour la tâche : ${[Link]}`);
15
16 }, delay);
17 }
Utiliser les API de notification du navigateur
Vérifier les permissions et afficher une notification.
1 function showNotification(message) {
2 if (!("Notification" in window)) {
3 alert("Les notifications ne sont pas supportées par ce
navigateur.");
4 return;
5 }
6 if ([Link] === "granted") {
7
11 | Page
8 new Notification(message);
9 } else if ([Link] !== "denied") {
10 [Link]().then(permission => {
11 if (permission === "granted") {
12 new Notification(message);
13 }
14 });
15 }
16 }
Activer les permissions de notification
Lorsque la page se charge, demander la permission pour les notifications si ce n’est pas déjà fait.
1 [Link]("DOMContentLoaded",
2 !== () => {
"denied") { 3 4
if ([Link] !== "granted" && [Link]
5
[Link]();
}
});
12 | Page