list filtering

Signed-off-by: Arnav Gupta <[email protected]>

Author: championswimmer

Lecture07/todolist/script.js

@@ -1,5 +1,6 @@
 let inpNewTask = document.getElementById('inpNewTask')
 let btnAdd = document.getElementById('btnAdd')
+let btnClearDone = document.getElementById('btnClearDone')
 let taskList = document.getElementById('taskList')
 
 // Code for managing model layer
@@ -10,6 +11,14 @@ function addItem(taskTitle) {
   tasks.push({ title: taskTitle, done: false })
 }
 
+function toggleItemDone(itemId) {
+  tasks[itemId].done = !tasks[itemId].done
+}
+
+function clearDoneItems() {
+  tasks = tasks.filter((x) => !x.done)
+}
+
 // Code for managing views
 
 function renderList() {
@@ -18,6 +27,10 @@ function renderList() {
     let item = document.createElement('li')
     item.innerText = tasks[i].title
     item.className = tasks[i].done ? 'list-group-item done' : 'list-group-item'
+    item.onclick = () => {
+      toggleItemDone(i)
+      renderList()
+    }
     taskList.appendChild(item)
   }
 }
@@ -36,6 +49,10 @@ btnAdd.addEventListener('click', addItemFromInput)
 inpNewTask.addEventListener('keypress', (event) => {
   if (event.keyCode == 13) addItemFromInput()
 })
+btnClearDone.addEventListener('click', () => {
+  clearDoneItems()
+  renderList()
+})
 
 // When page starts