Merge pull request #1 from absar22/add-completion-message

Add message when all todos are completed

Author: absar22

package-lock.json

@@ -2,8 +2,9 @@ const deleteBtn = document.querySelectorAll('.del')
 const todoItem = document.querySelectorAll('span.not')
 const todoComplete = document.querySelectorAll('span.completed')
 const editBtns = document.querySelectorAll('span.edit');
+const completedTasks = document.getElementById('completedTasks');  // Get the completed tasks element
 
-Array.from(deleteBtn).forEach((el)=>{
+Array.from(deleteBtn).forEach((el)=>{  
     el.addEventListener('click', deleteTodo)
 })
 
@@ -111,4 +112,19 @@ async function editTodo() {
     input.addEventListener('keydown', (e) => {
         if (e.key === 'Enter') saveEdit();
     });
-}
+}
+
+// Update message when all todos are completed
+function updateMessage(){
+    const todos = document.querySelectorAll('span.not, span.completed');
+    const completed = document.querySelectorAll('span.completed');
+    const total = todos.length;
+    const done = completed.length;
+    
+    if(done === total && total > 0){
+        completedTasks.style.display = 'block';
+    } else {
+        completedTasks.style.display = 'none';
+    }
+}
+updateMessage();

public/js/main.js

@@ -21,6 +21,9 @@
 
     <h2><%= user.userName %> has <%= left %> things left to do.</h2>
 
+    <!-- Show message when all todos are completed -->
+    <h3 id='completedTasks' style='display:none;'>🎉Congratulations <%= user.userName %>! You have completed your tasks today!</h3>
+
     <form action="/todos/createTodo" method='POST'>
         <input type="text" placeholder="Enter Todo Item" name='todoItem'>
         <input type="submit">