diff --git a/index.html b/index.html index a91cade..5f926c6 100644 --- a/index.html +++ b/index.html @@ -127,7 +127,7 @@

Sudah dibaca 📚

diff --git a/main.js b/main.js index b176ffa..005cd55 100644 --- 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" } - diff --git a/style.css b/style.css index 43a10b0..7de9d2e 100644 --- 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 {