add two ways to filter books

Bex0-0 · Bex0-0 · commit f7cc794a0434 · 2019-10-30T13:46:54.000+08:00
diff --git a/app.js b/app.js
@@ -32,6 +32,8 @@ addForm.addEventListener('submit', function(e){
   li.appendChild(bookName);
   li.appendChild(deleteBtn);
   list.appendChild(li);
+
+  addForm.querySelector('input[type="text"]').value = '';
 });
 
 // hide books
@@ -43,3 +45,47 @@ hideBox.addEventListener('change', function(e){
     list.style.display = "initial";
   }
 });
+
+// filter books
+const searchBar = document.forms['search-books'].querySelector('input');
+searchBar.addEventListener('keyup', function(e){
+  // console.log(e);
+  // console.log(typeof e.target.value);
+  const term = e.target.value.toLowerCase();
+  const books = list.getElementsByTagName('li');
+
+  Array.from(books).forEach((book) => {
+    // console.log(typeof book.innerHTML);
+    const title = book.firstElementChild.textContent;
+
+    if(title.toLowerCase().includes(term)){
+      book.style.display = 'list-item';
+    }else{
+      book.style.display = 'none';
+    }
+
+  });
+  
+});
+
+// const searchForm = document.forms['search-books'];
+// searchForm.addEventListener('submit', function(e){
+//   e.preventDefault();
+//   // console.log(e);
+//   // console.log(e.target.querySelector('input').innerHTML);
+//   const term = e.target.querySelector('input').value.toLowerCase();
+//   const names = list.querySelectorAll('.name');
+
+//   names.forEach((name) => {
+//     // console.log(typeof name.innerHTML);
+//     let bookName = name.innerHTML.toLowerCase();
+
+//     if(bookName.search(term) >= 0){
+//       name.parentNode.removeAttribute('hidden');
+//     }else{
+//       name.parentNode.setAttribute('hidden', 'hidden');
+//     }
+
+//   });
+  
+// });
