Compteur taĉhe à faire

README.md

@@ -10,6 +10,8 @@ Ce projet est une application simple de liste de tâches (Todo List) développé
 - **Tri des tâches** : Les tâches sont automatiquement triées pour afficher les tâches non complètes en premier.
 - **Supprimer une tâche** : Vous pouvez supprimer une tâche en cliquant sur le bouton "Supprimer" associé à chaque tâche.
 - **Sauvegarde persistante** : Les tâches sont sauvegardées dans le Local Storage du navigateur pour être conservées même après le rafraîchissement de la page.
+- **Comptage des tâches restantes** : Le nombre de tâches restantes à accomplir est calculé et affiché dynamiquement.
+
 
 
 ## Recommended IDE Setup

src/App.vue

@@ -13,7 +13,7 @@
 
   <div v-else>
     <ul>
-      <li v-for="todo in sortedTodos()" :key="todo.date" :class="{completed: todo.completed}">
+      <li v-for="todo in sortedTodos" :key="todo.date" :class="{completed: todo.completed}">
         <label>
           <input type="checkbox" v-model="todo.completed">
           {{ todo.title }}
@@ -22,6 +22,11 @@
         </label>
       </li>
     </ul>
+    <p v-if="remainingTodos > 0">
+       {{ remainingTodos }} tâche{{  remainingTodos > 1 ? 's' : '' }} à faire
+    
+    </p>
+     
 
     <div>
       <label >
@@ -36,7 +41,7 @@
 
 <script setup>
 
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 
 
 
@@ -56,13 +61,13 @@ const addTodo = () => {
   newTodo.value = '';
 };
 
-const sortedTodos = () => {
+const sortedTodos = computed(() => {
   const sortedTodo =  todos.value.toSorted((a, b) => a.completed > b.completed ? 1 : -1);
   if (hideCompleted.value === true){
     return sortedTodo.filter(t => t.completed === false)
   }
   return sortedTodo
-};
+});
 
 const deleteTodo = (id) => {
   const index = todos.value.findIndex(todo => todo.id === id); 
@@ -83,6 +88,9 @@ onMounted(() => {
   }
 });
 
+const remainingTodos = computed(() =>{
+  return todos.value.filter(t => t.completed === false).length
+})