From e05e4c054e081fc26daaa41a1b523b238696e480 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABl=20Gruand?= Date: Wed, 26 Mar 2025 10:46:48 +0100 Subject: [PATCH 1/3] Create a style and adding function --- index.html | 2 +- index.js | 40 ++++++++++++++++++++------- styles.css | 79 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 110 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 7a61c9b..de06924 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@

TaskManager

- Profile + Profile
diff --git a/index.js b/index.js index 09dc114..ae062f4 100644 --- a/index.js +++ b/index.js @@ -9,11 +9,9 @@ const tasksDiv = document.getElementById('tasks'); const seeKanbanBtn = document.getElementById('seeKanban'); const seeTableBtn = document.getElementById('seeTable'); -// Objet pour stocker les informations utilisateur -const user = { - name: '', - email: '' -}; +// Vérification et chargement des données depuis localStorage +let user = JSON.parse(localStorage.getItem('user')) || { name: '', email: '' }; +let tasks = JSON.parse(localStorage.getItem('tasks')) || []; // Fonction de validation des informations utilisateur function validateUser() { @@ -29,6 +27,9 @@ function validateUser() { user.name = name; user.email = email; + // Sauvegarder dans localStorage + localStorage.setItem('user', JSON.stringify(user)); + message.innerText = `Connexion réussie. Bienvenue, ${user.name} !`; message.style.color = "green"; @@ -52,10 +53,7 @@ function displayProfile() { addTaskBtn.addEventListener('click', addTask); } -// Tableau pour stocker les tâches (vide par défaut) -const tasks = []; - -// Fonction pour afficher les tâches en vue Kanban +// Fonction pour afficher les tâches en vue Kanban ou Table function displayTasks(view) { tasksDiv.innerHTML = ""; // Réinitialisation des tâches @@ -112,7 +110,7 @@ function displayTasks(view) { deleteTask(index); }); }); - + // Ajout des événements de modification pour chaque tâche dans le tableau const modifyBtns = document.querySelectorAll('.modify'); modifyBtns.forEach((btn) => { @@ -132,6 +130,10 @@ function addTask() { if (newTask !== '') { tasks.push(newTask); taskInput.value = ''; + + // Sauvegarder dans localStorage + localStorage.setItem('tasks', JSON.stringify(tasks)); + displayTasks("kanban"); // On affiche par défaut en Kanban } else { alert("Veuillez entrer une tâche valide."); @@ -141,6 +143,10 @@ function addTask() { // Fonction pour supprimer une tâche function deleteTask(index) { tasks.splice(index, 1); + + // Sauvegarder dans localStorage + localStorage.setItem('tasks', JSON.stringify(tasks)); + displayTasks("kanban"); } @@ -150,6 +156,10 @@ function modifyTask(index) { if (newTask !== null && newTask.trim() !== "") { tasks[index] = newTask.trim(); + + // Sauvegarder dans localStorage + localStorage.setItem('tasks', JSON.stringify(tasks)); + displayTasks("kanban"); // Mettre à jour la vue Kanban displayTasks("table"); // Mettre à jour la vue Table } @@ -159,3 +169,13 @@ function modifyTask(index) { seeKanbanBtn.addEventListener("click", () => displayTasks("kanban")); seeTableBtn.addEventListener("click", () => displayTasks("table")); validateBtn.addEventListener("click", validateUser); + +// Charger les données initiales si disponibles dans localStorage +if (user.name && user.email) { + message.innerText = `Connexion réussie. Bienvenue, ${user.name} !`; + message.style.color = "green"; + displayProfile(); +} else { + message.innerText = "Veuillez vous connecter."; + message.style.color = "red"; +} diff --git a/styles.css b/styles.css index 6ba0e67..431582a 100644 --- a/styles.css +++ b/styles.css @@ -146,6 +146,55 @@ body { transform: translateY(-5px); } +.task-card button { + background-color: #f44336; + color: white; + border: none; + padding: 5px 10px; + margin-top: 10px; + cursor: pointer; + border-radius: 5px; + transition: background-color 0.3s; +} + +.task-card button:hover { + background-color: #e53935; +} + +/* Vue Table */ +#tasks table { + width: 100%; + border-collapse: collapse; + margin-top: 20px; +} + +#tasks table th, +#tasks table td { + padding: 10px; + text-align: left; + border-bottom: 1px solid #ddd; +} + +#tasks table th { + background-color: #4caf50; + color: white; +} + +#tasks table td button { + background-color: #f44336; + color: white; + border: none; + padding: 5px 10px; + margin-right: 5px; + cursor: pointer; + border-radius: 5px; + transition: background-color 0.3s; +} + +#tasks table td button:hover { + background-color: #e53935; +} + /* Vue options */ #vue { width: 60%; @@ -173,3 +222,33 @@ body { #vue button:hover { background-color: #45a049; } + +/* Section Ajouter Tâche */ +#profile-sect input[type="text"] { + width: 75%; + padding: 10px; + margin-top: 10px; + border: 1px solid #ccc; + border-radius: 5px; + outline: none; +} + +#profile-sect button { + width: 20%; + padding: 10px; + background-color: #4caf50; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + margin-top: 10px; + font-weight: bold; +} + +#profile-sect button:hover { + background-color: #45a049; +} + +#add-task { + width: 100%; +} From 9731c18eb49c89b47d6aeb4cd2b0d3427af57c9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABl=20Gruand?= Date: Wed, 26 Mar 2025 10:54:03 +0100 Subject: [PATCH 2/3] Adding mobile first design --- styles.css | 70 ++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 63 insertions(+), 7 deletions(-) diff --git a/styles.css b/styles.css index 431582a..76ff6c3 100644 --- a/styles.css +++ b/styles.css @@ -53,7 +53,8 @@ body { /* Formulaire de login */ #login { - width: 300px; + width: 90%; + max-width: 400px; margin: 20px auto; padding: 20px; background-color: #fff; @@ -100,7 +101,8 @@ body { /* Section profil utilisateur */ #profile-sect { - width: 300px; + width: 90%; + max-width: 400px; margin: 20px auto; padding: 20px; background-color: #fff; @@ -112,7 +114,8 @@ body { /* Affichage des tâches */ #tasks { - width: 60%; + width: 90%; + max-width: 800px; margin: 20px auto; padding: 20px; background-color: #fff; @@ -136,7 +139,8 @@ body { padding: 15px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - width: 200px; + width: 100%; + max-width: 250px; text-align: center; margin-bottom: 10px; transition: transform 0.3s; @@ -197,7 +201,8 @@ body { /* Vue options */ #vue { - width: 60%; + width: 90%; + max-width: 800px; margin: 20px auto; padding: 20px; background-color: #fff; @@ -249,6 +254,57 @@ body { background-color: #45a049; } -#add-task { - width: 100%; +/* Responsive Design - Mobile First */ +@media (max-width: 768px) { + .navbar { + flex-direction: column; + text-align: center; + } + + .navbar button { + width: 100%; + margin: 5px 0; + } + + #profile-sect input[type="text"], + #profile-sect button { + width: 100%; + } + + #tasks { + width: 100%; + } + + .task-card { + width: 100%; + max-width: 100%; + } + + #vue { + width: 100%; + } +} + +/* Responsive Design - Tablettes et au-delà */ +@media (min-width: 769px) { + .navbar { + flex-direction: row; + } + + .task-card { + width: 45%; + max-width: 250px; + } + + #tasks { + width: 60%; + } + + #profile-sect { + width: 50%; + } + + #vue { + width: 60%; + } } From 43206e7e1edfcf6eacfe827100527de23f0f03bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABl=20Gruand?= Date: Wed, 26 Mar 2025 10:56:57 +0100 Subject: [PATCH 3/3] adding an alert = "Indisponible when clicking on the profile button --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index de06924..dc1b15d 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@

TaskManager

- Profile + Profile