Merge pull request #20 from RichardHanitio/main

Added filter feature

Author: samipak458

index.html

@@ -54,6 +54,19 @@
             color: red;
             font-size: 18px;
         }
+
+        #filter-books {
+            border-radius : 45px;
+            border : none;
+            outline : none;
+            height : 38px;
+            padding : 0 5px;
+        }
+
+        #filter-books:focus{
+            outline : 3px solid rgb(46, 123, 255);
+        }
+
     </style>
 
 </head>
@@ -74,6 +87,12 @@
 
             </ul>
             <form class="form-inline my-2 my-lg-0">
+                <select name="filter" id="filter-books" class="form-select mr-sm-2">
+                    <option value="all" selected >All</option>
+                    <option value="book">Name</option>
+                    <option value="bookauthor">Author</option>
+                    <option value="bookType">Type</option>
+                </select>
                 <input class="form-control mr-sm-2" id="searchText" type="search" style="border-radius: 45px;"
                     placeholder="Search">
                 <button class="btn btn-dark my-2 my-sm-0 px-3" type="submit"

script.js

@@ -106,7 +106,6 @@ function displayBooks() {
     let index = 0;
 
     objOfBook.forEach((books) => {  //index is the length of the array
-
         if (index == 0) {
             html += `
            <tr class="rows">
@@ -345,4 +344,82 @@ function showNumberOfBooks() {
     }
 }
 
+// Filter books based on selected attributes from dropdown
+let filterDropdown = document.getElementById("filter-books");
+function filterBooks() {
+    let books = JSON.parse(localStorage.getItem("shelfOfBooks"));
+    // let numOfBooks = document.getElementById("books");
+    let emptyMsg = document.getElementById("emptyMsg");
+    let filterBy = filterDropdown.value;
+    let html = "";
+    let index = 0;
+    let filteredBooks;
+    if (filterBy === "all") {
+        filteredBooks = books.filter((book) => {
+            return (
+                book.book
+                    .toLowerCase()
+                    .includes(searchNote.value.toLowerCase()) ||
+                book.bookauthor
+                    .toLowerCase()
+                    .includes(searchNote.value.toLowerCase()) ||
+                book.bookType
+                    .toLowerCase()
+                    .includes(searchNote.value.toLowerCase())
+            );
+        });
+    } else {
+        filteredBooks = books.filter((book) => {
+            return book[filterBy]
+                .toLowerCase()
+                .includes(searchNote.value.toLowerCase());
+        });
+    }
+
+    if (filteredBooks.length > 0) {
+        filteredBooks.forEach((filteredBook) => {
+            html += `
+            <tr class="rows">
+            <th scope="row">${index + 1}</th>
+            <td class="name">${filteredBook.book}</td>
+            <td class="author">${filteredBook.bookauthor}</td>
+            <td class="type">${filteredBook.bookType}</td>
+            <td class="icon"><i class="fa fa-times" aria-hidden="true" onclick="removeBook(${index})"></i></td>
+            </tr>
+        `;
+            index++;
+        });
+        emptyMsg.innerHTML = "";
+    } else {
+        let bookAttr;
+        switch (filterBy) {
+            case "all":
+                bookAttr = "";
+                break;
+            case "book":
+                bookAttr = "name";
+                break;
+            case "bookauthor":
+                bookAttr = "author";
+                break;
+            case "bookType":
+                bookAttr = "type";
+                break;
+        }
+
+        emptyMsg.innerHTML = `No book ${
+            bookAttr !== "" ? "with" : ""
+        } ${bookAttr} "${searchNote.value}" found`;
+    }
+
+    // ? Does the number of books depends on the search results?
+    // numOfBooks.innerHTML = "No. of Books: " + filteredBooks.length;
+
+    let table = document.getElementById("tableBody");
+    table.innerHTML = html;
+}
+filterDropdown.addEventListener( "change", filterBooks);
+searchNote.addEventListener("input", filterBooks);
+
+
 showNumberOfBooks();