To Do list: interactive list

.eslintrc.json

@@ -21,6 +21,6 @@
   "ignorePatterns": [
     "dist/",
     "build/",
-    "src/index.js"
+    "src/"
   ]
 }

README.md

@@ -1,11 +1,12 @@
 # To_do_list
 
 > In this project we created a simple application wich will allow users to add their daily tasks 
-and can even restore them.
+and can even restore them. They can remove a specific task by clicking on the right icon of the task or remove 
+all completed tasks by clicking on the clear-all-completed button at the bottom of the apllication.
 
 ## How it looks like :
 
-![todolist](https://user-images.githubusercontent.com/94958024/160847900-0231404b-4d25-4b80-9c5b-ee60c2f15e5a.png)
+![Todolist2](https://user-images.githubusercontent.com/94958024/161342026-0f2728c0-46b4-4fc1-a51c-b9f7612e6a81.png)
 
 
 ## Built With

src/index.html

@@ -12,9 +12,9 @@
     <div class="wrapper">
         <div class="head-list"><h1>To do list</h1><img src="https://icon-library.com/images/reset-icon-png/reset-icon-png-2.jpg" alt=""></div>
 
-            <input type="text" id="add-task" class = "input-field" placeholder="add a new task">
+            <input type="text" id="add-task" class = "input-field" placeholder="press 'Enter' to add a new task">
             <ul class="tasks-list"></ul>
-            <button>Clear all completed</button>
+            <button class="clear-all-btn">Clear all completed</button>
     </div>
     <script src="index.js"></script>
 </body>

src/index.js

@@ -1,4 +1,5 @@
 import './style.css';
+import AddRemove from './modules/AddRemove';
 
 class TaskObj {
   constructor(description, completed, index) {
@@ -8,58 +9,6 @@ class TaskObj {
   }
 }
 
-const myTasksList = document.querySelector('.tasks-list');
-/* eslint-disable max-classes-per-file: "error" */
-class AddRemove {
-  tasks = [];
-
-  addTask(myTask) {
-    this.tasks.push(myTask);
-    this.#updateList(myTask);
-  }
-
-  removeTask(myTask) {
-    this.tasks = this.tasks.filter((oneTask) => oneTask.description !== myTask.description);
-
-    this.#updateList();
-  }
-
-  #updateList() {
-    myTasksList.innerHTML = '';
-
-    let TaskHtml = '';
-
-    for (let i = 0; i < this.tasks.length; i += 1) {
-      const taskItem = myTasksList.appendChild(document.createElement('li'));
-      taskItem.classList.add('a-task');
-      TaskHtml = `<input type="checkbox" id = "${this.tasks[i].completed} ${this.tasks[i].index}" name="task" id="my-task">
-      <input type="text" id = ${i} class="li-description" value = "${this.tasks[i].description}" required> <i id = ${i} class="fa fa-trash remove-btn" aria-hidden="true"></i>`;
-      taskItem.innerHTML = TaskHtml;
-
-      this.tasks[i].index = i + 1;
-      this.tasks[i].completed = false;
-    }
-
-    const removeBtn = document.querySelectorAll('.remove-btn');
-    const inputValue = document.querySelectorAll('.li-description');
-
-    inputValue.forEach((input, index) => {
-      input.addEventListener('keyup', (e) => {
-        if (e.target.value !== '') {
-          this.tasks[index].description = e.target.value;
-          localStorage.setItem('tasks', JSON.stringify(this.tasks));
-        }
-      });
-    });
-    localStorage.setItem('tasks', JSON.stringify(this.tasks));
-    removeBtn.forEach((button) => {
-      button.addEventListener('click', (event) => {
-        this.removeTask(this.tasks[event.target.id]);
-      });
-    });
-  }
-}
-//----------------------------------------------------
 const myUiTask = new AddRemove();
 const inputBox = document.querySelector('.input-field');
 

src/modules/AddRemove.js

@@ -0,0 +1,76 @@
+const myTasksList = document.querySelector('.tasks-list');
+
+class AddRemove {
+    tasks = [];
+
+    addTask(myTask) {
+      this.tasks.push(myTask);
+      this.#updateList(myTask);
+    }
+
+    removeTask(myTask) {
+      this.tasks = this.tasks.filter((oneTask) => oneTask.description !== myTask.description);
+
+      this.#updateList();
+    }
+
+    #updateList() {
+      myTasksList.innerHTML = '';
+
+      let TaskHtml = '';
+
+      for (let i = 0; i < this.tasks.length; i += 1) {
+        const taskItem = myTasksList.appendChild(document.createElement('li'));
+        taskItem.classList.add('a-task');
+        TaskHtml = `<input type="checkbox" id = "${this.tasks[i].completed} " name="task" id="my-task">
+        <input type="text" id = ${i} class="li-description" value = "${this.tasks[i].description}" required> <i id = ${i} class="fa fa-trash remove-btn" aria-hidden="true"></i>`;
+        taskItem.innerHTML = TaskHtml;
+
+        this.tasks[i].index = i + 1;
+        this.tasks[i].completed = false;
+      }
+
+      const removeBtn = document.querySelectorAll('.remove-btn');
+      const inputValue = document.querySelectorAll('.li-description');
+
+      inputValue.forEach((input, index) => {
+        input.addEventListener('keyup', (e) => {
+          if (e.target.value !== '') {
+            this.tasks[index].description = e.target.value;
+            localStorage.setItem('tasks', JSON.stringify(this.tasks));
+          }
+        });
+      });
+
+      const getCheckBox = document.querySelectorAll('input[type=checkbox]');
+
+      getCheckBox.forEach((element, id) => {
+        element.addEventListener('change', () => {
+          if (element.checked) {
+            this.tasks[id].completed = true;
+            localStorage.setItem('tasks', JSON.stringify(this.tasks));
+          } else {
+            this.tasks[id].completed = false;
+            localStorage.setItem('tasks', JSON.stringify(this.tasks));
+          }
+        });
+      });
+
+      const removeBtnAll = document.querySelector('.clear-all-btn');
+
+      removeBtnAll.addEventListener('click', () => {
+        this.tasks = this.tasks.filter((task) => task.completed == false);
+        localStorage.setItem('tasks', JSON.stringify(this.tasks));
+        this.#updateList();
+      });
+
+      localStorage.setItem('tasks', JSON.stringify(this.tasks));
+      removeBtn.forEach((button) => {
+        button.addEventListener('click', (event) => {
+          this.removeTask(this.tasks[event.target.id]);
+        });
+      });
+    }
+}
+
+export default AddRemove;

src/style.css

@@ -33,6 +33,7 @@ body {
   height: 4%;
   align-self: center;
   margin-right: 10px;
+  cursor: pointer;
 }
 
 h1 {