Merge pull request #5 from salocor/main

Added "Complete All" button for tasks

Author: Dharmik48

index.html

@@ -30,6 +30,9 @@ <h1>ToDo List</h1>
 			<div class="new-task btn">
 				<i class="fas fa-plus"></i>
             </div>
+            <div class="complete-all btn">
+                Complete All
+            </div>
             <section class="hidden add-task sec">
                 <textarea placeholder="Enter new task here"></textarea>
                 <div class="add-task-btn btn">

main.js

@@ -3,6 +3,7 @@ let todoContainer = document.querySelector('.tasks-wrapper');
 let newBtn = document.querySelector('.new-task');
 let addBtn = document.querySelector('.add-task-btn');
 let cancelBtn = document.querySelector('.cancel');
+let completeAllBtn = document.querySelector('.complete-all');
 
 newBtn.addEventListener('click', hidePage);
 setUpPage();
@@ -14,6 +15,17 @@ function setUpPage() {
     });
 }
 
+// Complete all Todo
+
+completeAllBtn.addEventListener('click', () => {
+    let savedTasks = JSON.parse(localStorage.getItem('tasks'))
+    
+    for (let i = 0, len = savedTasks.length; i < len; i++) {
+        var check = document.getElementsByName("completed")[i];
+        check.checked = "checked";
+    }
+});
+
 // Create TODO
 addBtn.addEventListener('click', () => {
     newTodo = document.querySelector('textarea').value;
@@ -54,7 +66,7 @@ function hidePage() {
 
 function createTodo(newTodo) {
     const demoTodo = document.createElement('LI');
-    demoTodo.innerHTML = "<input type='checkbox'> <p class='todo'>" + newTodo + "</p><i class='far fa-trash-alt delete'></i>";
+    demoTodo.innerHTML = "<input type='checkbox' name='completed'> <p class='todo'>" + newTodo + "</p><i class='far fa-trash-alt delete'></i>";
     todoContainer.appendChild(demoTodo);
 };
 

styles.css

@@ -49,6 +49,7 @@ main {
     justify-content: space-between;
     width: 100%;
     margin: 25px 0px;
+    padding-bottom: 10px;
 }
 
 .tasks-wrapper {
@@ -142,6 +143,15 @@ input:checked + p {
     transition: transform 300ms;
 }
 
+.complete-all {
+    font-size: 12px;
+    padding: 10px 15px;
+    border-radius: 12px;
+    box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.4);
+    left: 15px;
+    bottom: 15px;
+}
+
 .add-task textarea {
     border: none;
     outline: none;
@@ -177,4 +187,4 @@ li:hover .delete{
     pointer-events: all;
     opacity: 1;
     transform: translateX(0);
-}
+}