final

index.html

@@ -45,7 +45,7 @@
                     <div class="intro-content">
                         <h1>LiteraCure</h1>
                         <p> ------------</p>
-                        <h2>Cara mudah mengarsipkan buku kamu </h2>
+                        <h3>Cara mudah mengarsipkan buku kamu </h3>
                         <p> ------------</p>
                         <p> ------------</p>
                         <h3>Jangan sampai progres membacamu terkendala karena tidak tercatat dengan baik.</h3>
@@ -104,6 +104,7 @@ <h2>Cari Buku</h2>
                                     <label for="searchBook" style="text-align: center;">Judul</label>
                                     <input type="text" id="searchBook" placeholder="masukkan judul...">
                                     <button type="submit" id="btn-search-book">Cari</button>
+                                    <button type="submit" id="btn-clear-search" onclick="window.location.href=window.location.href">Clear</button>
                                 </div>
                             </form>
                             <div id="shelf-base"></div>

script/main.js

@@ -5,9 +5,7 @@ document.addEventListener('DOMContentLoaded', function(){
         const titleBook = document.getElementById('searchBook').value;
         event.preventDefault();
         searchTitleBook(titleBook);
-        console.log(titleBook);
     });
-
     if (isStorageExist()) {
         loadData();
     };
@@ -29,7 +27,11 @@ function registry() {
             category: bookCategory.value,
             isComplete: isRead.checked
         };
-    books.push(bookDetails);
+    if (bookDetails.title !== "" && bookDetails.author !== "" && bookDetails.year !== "" && bookDetails.year !== "" && bookDetails.category !== ""){
+        books.push(bookDetails);
+    } else {
+        alert("Tolong lengkapi formulir!");
+    }
     document.dispatchEvent(new Event('render-event'));
     clearText();
     save();
@@ -56,12 +58,10 @@ function searchTitleBook(title){
     inCompleteBooks.innerHTML = '';
     searchResult.innerHTML = '';
 
-    const lowerTitle = title.toLowerCase();
     for (const book of books){
-        if ( book.title.toLowerCase() == lowerTitle){
+        if ( book.title == title){
             const bookElement = createShelf(book);
             const searchElements = displaySearch(book);
-            console.log(bookElement);
             if(book.isComplete){
                 completeBooks.append(bookElement);
                 searchResult.append(searchElements);
@@ -70,6 +70,12 @@ function searchTitleBook(title){
                 inCompleteBooks.append(bookElement);
                 searchResult.append(searchElements);
             }
+        } 
+        else {
+            const noCompleteBook = emptyBook();
+            completeBooks.append(noCompleteBook);
+            const noIncompleteBook = emptyBook();
+            inCompleteBooks.append(noIncompleteBook);
         }
     }
 }

script/render.js

@@ -32,16 +32,17 @@ function emptyBook(){
     noBook.classList.add('no-book');
 
     const text = document.createElement('h3');
-    text.innerText = 'belum ada buku';
+    text.innerText = 'Tidak ada buku';
 
     noBook.append(text);
+    styleBox(noBook);
     return noBook;
 }
 
 // create object book
 function createShelf(objectBook) {
     const titleBook = document.createElement('h3');
-    titleBook.innerText = objectBook.title.toUpperCase();
+    titleBook.innerText = objectBook.title;
     titleBook.style.backgroundColor='#675bd1';
     titleBook.style.padding='5px';
     titleBook.style.borderRadius='5px';
@@ -122,7 +123,7 @@ function createShelf(objectBook) {
 // Custom search result
 function displaySearch (objectBook) {
     const titleSearch = document.createElement('h3');
-    titleSearch.innerText = objectBook.title.toUpperCase();
+    titleSearch.innerText = objectBook.title;
     titleSearch.style.backgroundColor='#675bd1';
     titleSearch.style.padding='5px';
     titleSearch.style.borderRadius='5px';
@@ -166,7 +167,5 @@ function clearText(){
     document.querySelector("#input-IsComplete").value = '';
     document.getElementById('searchBook').value = '';
     let readCheck = document.querySelector("#input-IsComplete");
-    for (const reaD of readCheck ){
-        readCheck.checked = false;
-    }
+    readCheck.checked = false;
 }

script/storage.js

@@ -4,7 +4,18 @@ function getData() {
     return JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
 }
 
-// check storage
+//check storage 
+function loadData() {
+    const resultData = localStorage.getItem(STORAGE_KEY);
+    let dataBooks = JSON.parse(resultData);
+    if (dataBooks !== null) {
+        for (const book of dataBooks) {
+            books.push(book);
+        }
+    }
+    document.dispatchEvent(new Event('render-event'));
+}
+
 function isStorageExist() /* boolean */ {
     if (typeof (Storage) === undefined) {
       alert('Browser tidak mendukung local storage');
@@ -20,18 +31,4 @@ function save() {
     const parsed = JSON.stringify(books);
     localStorage.setItem(STORAGE_KEY, parsed);
     }
-}
-
-//check storage 
-function loadData() {
-    const resultData = localStorage.getItem(STORAGE_KEY);
-    let dataBooks = JSON.parse(resultData);
-    books = [];
-    if (dataBooks !== null) {
-    for (const book of dataBooks) {
-        books.push(book);
-    }
-    }
-
-    document.dispatchEvent(new Event('render-event'));
 }

style.css

@@ -135,6 +135,14 @@ main {
     background-color: #FFFFD0;
 }
 
+h2 {
+    padding: 10px 0px 10px 0px;
+    font-size: 20px;
+    color: black;
+    background-color: #aea9d3;
+    border-radius: 10px;
+    margin: 5px 20px 5px 20px;
+}
 .inner-main {
     display: flex;
     flex-direction: column;
@@ -314,8 +322,8 @@ form {
     text-align: left;
     padding: 10px;
     font-size: 20px;
-    color: rgb(245, 196, 63);
-    background-color: #25223b;
+    color: black;
+    background-color: #aea9d3;
     border-radius: 10px;
     margin: 5px 20px 5px 20px;
 }