fix: show books after clear search value

nnivxix · Dec 17, 2023 · 8850377 · 8850377
1 parent 2b7344c
commit 8850377
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -127,7 +127,7 @@ <h2>Sudah dibaca 📚</h2>
 
       <footer>
         <p>
-          Dibangun bersama dengan 💛 oleh
+          Dibangun dengan 💛 oleh
           <a target="_blank" href="https://github.com/nnivxix">Hanasa</a> di 🇮🇩.
         </p>
       </footer>

diff --git a/main.js b/main.js
@@ -13,6 +13,7 @@ const clearSearch = document.getElementById("clearSearch");
 const bookSubmit = document.getElementById("bookSubmit");
 const formInput = document.getElementById("inputBook");
 const inputSection = document.getElementById("input_section");
+const bookItems = document.getElementsByClassName("book_item");
 
 /**
  *
@@ -32,6 +33,9 @@ clearSearch.addEventListener("click", function () {
   clearSearch.style.display = "none";
   inputSection.classList.remove("hidden");
   inputSection.classList.add("flex");
+  for (const bookItem of bookItems) {
+    bookItem.style.display = "block";
+  }
 });
 
 /**
@@ -153,8 +157,7 @@ const filterByName = (title) => {
 };
 
 function findBookByName(searchValue) {
-  const bookItem = document.getElementsByClassName("book_item");
-  for (const book of bookItem) {
+  for (const book of bookItems) {
     const itemTitle = book.querySelector(".item-title");
     if (
       itemTitle.textContent
@@ -215,7 +218,7 @@ function renderBook(book, selector) {
           book.isComplete ? "Tandai sedang dibaca" : "Tandai sudah dibaca"
         }</button>
             <button onClick="editBook('${book.id}')">Perbaharui Buku</button>
-            <button onClick="deleteBook('${book.id}','${
+            <button class="deleteBook" onClick="deleteBook('${book.id}','${
           book.title
         }')">Hapus buku</button>
           </div>

diff --git a/style.css b/style.css
@@ -3,6 +3,7 @@
   --main-text-color: #636363;
   --second-text-color: #1B263B;
   --box-color: #D9D9D9;
+  --danger: #e83023;
   --text-box-color: #868686;
   --has-read: #84DD63;
   --in-read: #A2D8E4;
@@ -194,6 +195,11 @@ color: var(--second-text-color);
 .incompleted {
   background-color: var(--in-read);
 }
+.deleteBook {
+  color: var(--danger);
+  border: 1px solid var(--danger) !important;
+}
+
 
 #searchBookTitle {
   background-color: var(--box-color);
@@ -214,6 +220,7 @@ color: var(--second-text-color);
   margin-right: 14px;
   margin-top: 8px;
   cursor: pointer;
+  display: none;
 }
 
 footer {