From ee90aa393601325f63be655f21acfa0676774f89 Mon Sep 17 00:00:00 2001
From: fabienmcll <fabienmclll@gmail.com>
Date: Sat, 24 Aug 2024 12:00:31 +0200
Subject: [PATCH] v2 - suppression et sauvegarde

---
 src/App.vue         | 30 ++++++++++++++++++++++++++++--
 src/assets/main.css | 12 +++++++++++-
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 723f85d..1818242 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,6 +17,7 @@
         <label>
           <input type="checkbox" v-model="todo.completed">
           {{ todo.title }}
+          <button class="delete" @click="deleteTodo(todo.id)">Supprimer</button>
 
         </label>
       </li>
@@ -35,7 +36,8 @@
 
 <script setup>
 
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
+
 
 
 const hideCompleted = ref(false)
@@ -46,9 +48,11 @@ const addTodo = () => {
   todos.value.push({
     title: newTodo.value,
     completed: false,
-    date: Date.now()  
+    date: Date.now(),
+    id: Date.now() + Math.random()  
   });
 
+  saveTodosToLocalStorage(); 
   newTodo.value = '';
 };
 
@@ -60,5 +64,27 @@ const sortedTodos = () => {
   return sortedTodo
 };
 
+const deleteTodo = (id) => {
+  const index = todos.value.findIndex(todo => todo.id === id); 
+  if (index !== -1) {
+    todos.value.splice(index, 1);  
+    saveTodosToLocalStorage();
+  }
+};
+
+const saveTodosToLocalStorage = () => {
+  localStorage.setItem('todos', JSON.stringify(todos.value));
+};
+
+onMounted(() => {
+  const savedTodos = localStorage.getItem('todos');
+  if (savedTodos) {
+    todos.value = JSON.parse(savedTodos);
+  }
+});
+
+
+
+
 </script>
 
diff --git a/src/assets/main.css b/src/assets/main.css
index 91ab347..2ccb0aa 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,4 +1,14 @@
 .completed {
   opacity: .5;
   text-decoration: line-through;
-}
\ No newline at end of file
+}
+
+.delete {
+  padding: 5px 10px;  
+  font-size: 12px;    
+  height: 30px;       
+  width: auto;        
+  color: red;
+  background-color: transparent;
+  border: none;
+}