From 2869e2583483416010a112b5688acbbb34448b4e Mon Sep 17 00:00:00 2001
From: fabienmcll <fabienmclll@gmail.com>
Date: Mon, 26 Aug 2024 11:56:05 +0200
Subject: [PATCH] =?UTF-8?q?Compteur=20ta=C4=89he=20=C3=A0=20faire?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md   |  2 ++
 src/App.vue | 16 ++++++++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 80012b2..3273a28 100644
--- a/README.md
+++ b/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
diff --git a/src/App.vue b/src/App.vue
index 1818242..abcb3c7 100644
--- a/src/App.vue
+++ b/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
+})