Clear all

src/scripts/Task.js

@@ -1,7 +1,7 @@
 export default class Task {
-  constructor(description, index) {
+  constructor(description, index, status) {
     this.description = description;
-    this.completed = false;
+    this.completed = status;
     this.index = index;
   }
 }

src/scripts/TaskCollection.js

@@ -1,6 +1,7 @@
 import Task from './Task.js';
 import Dots from './icons/dots.svg';
 import Del from './icons/delete.svg';
+import { setStatus } from './completed.js';
 
 const listContainer = document.querySelector('ul');
 export default class TaskCollection {
@@ -12,8 +13,8 @@ export default class TaskCollection {
     localStorage.setItem('collection', JSON.stringify(this.list));
   }
 
-  addTask(description) {
-    const task = new Task(description, this.list.length + 1);
+  addTask(description, status = false) {
+    const task = new Task(description, this.list.length + 1, status);
     this.list.push(task);
     this.saveStorage();
     return task;
@@ -23,14 +24,14 @@ export default class TaskCollection {
     const collection = JSON.parse(localStorage.getItem('collection'));
     if (collection) {
       collection.forEach((task) => {
-        this.addTask(task.description);
+        this.addTask(task.description, task.completed);
       });
       return true;
     }
     return false;
   }
 
-  removeTask(currentTask, pointer) {
+  removeTask(currentTask) {
     this.list.splice(currentTask.index - 1, 1);
     let index = 1;
     this.list.forEach((task) => {
@@ -40,12 +41,13 @@ export default class TaskCollection {
       index += 1;
     });
     this.saveStorage();
-    listContainer.removeChild(pointer);
+    listContainer.removeChild(currentTask.pointer);
   }
 
   display(task) {
     const listItem = document.createElement('li');
     listItem.classList.add('task', 'card');
+    task.pointer = listItem;
 
     const listAttributes = document.createElement('div');
 
@@ -56,7 +58,7 @@ export default class TaskCollection {
     listAttributes.appendChild(description);
 
     description.insertAdjacentHTML('beforebegin', `<label class="box">
-      <input type="checkbox">
+      <input class="check"  type="checkbox">
       <span class="checkmark"></span>
     </label>`);
 
@@ -70,6 +72,10 @@ export default class TaskCollection {
     dragButton.appendChild(dots);
     listItem.appendChild(dragButton);
 
+    const checkBox = listItem.querySelector('.check');
+    checkBox.checked = task.completed;
+    setStatus(task, checkBox, description);
+
     listContainer.appendChild(listItem);
 
     description.addEventListener('change', (event) => {
@@ -92,5 +98,10 @@ export default class TaskCollection {
       listItem.style.backgroundColor = 'white';
       dots.src = Dots;
     });
+
+    checkBox.addEventListener('change', () => {
+      setStatus(task, checkBox, description);
+      this.saveStorage();
+    });
   }
 }

src/scripts/completed.js

@@ -0,0 +1,15 @@
+function setStatus(item, element, input) {
+  item.completed = element.checked;
+  if (item.completed) {
+    input.style.textDecoration = 'line-through';
+  } else {
+    input.style.textDecoration = 'none';
+  }
+}
+
+function clearCompleted(collection) {
+  const newCollection = collection.filter((item) => item.completed);
+  return newCollection;
+}
+
+export { setStatus, clearCompleted };

src/scripts/index.js

@@ -1,9 +1,11 @@
 import './styles/main.scss';
 import TaskCollection from './TaskCollection.js';
+import { clearCompleted } from './completed.js';
 
 const tasks = new TaskCollection();
 
 const addForm = document.querySelector('#addForm');
+const clearButton = document.querySelector('#clear');
 
 const render = () => {
   tasks.list = tasks.list.sort((a, b) => a.index - b.index);
@@ -27,4 +29,11 @@ window.onload = () => {
   if (tasks.loadStorage()) {
     render();
   }
-};
+};
+
+clearButton.addEventListener('click', () => {
+  const completedList = clearCompleted(tasks.list);
+  completedList.forEach((task) => {
+    tasks.removeTask(task);
+  });
+});