16 video

Fleksis · Fleksis · commit 6a9c9d27c3bf · 2021-03-16T17:24:54.000+02:00
diff --git a/app.js b/app.js
@@ -32,5 +32,29 @@ li.appendChild(bookName);
 li.appendChild(deleteBtn)
 list.appendChild(li);
 
-
 });
+
+//hide books
+const hideBox = document.querySelector('#hide');
+hideBox.addEventListener('change', function(e){
+  if(hideBox.checked){
+    list.style.display = 'none';
+  } else {
+    list.style.display = 'initial';
+  }
+})
+
+//filter books
+const searchBar = document.forms['search-books'].querySelector('input');
+searchBar.addEventListener('keyup', function(e){
+  const term = e.target.value.toLowerCase();
+  const books = list.getElementsByTagName('li');
+  Array.from(books).forEach(function(book){
+    const title = book.firstElementChild.textContent;
+    if(title.toLowerCase().indexOf(term) != -1){
+      book.style.display = 'block';
+    } else {
+      book.style.display = 'none';
+      }
+    });
+  });
diff --git a/index.html b/index.html
@@ -11,7 +11,6 @@
 	    	<div id="page-banner">
 	    		<h1 class="title">Bookorama</h1>
           <p>Books for Ninjas</p>
-		  <a href='http://www.thenetninja.co.uk'>the net ninja</a>
           <form id="search-books">
             <input type="text" placeholder="Search books..." />
           </form>
@@ -39,6 +38,8 @@ <h2 class="title">Books to Read</h2>
 	    	</ul>
 	    </div>
 	    <form id="add-book">
+			<input type='checkbox' id='hide'/>
+			<label for='hide'>Hide all books</label>
 	    	<input type="text" placeholder="Add a book..." />
 	    	<button>Add</button>
 	    </form>
diff --git a/styles.css b/styles.css
@@ -115,16 +115,15 @@ h1, h2{
     clear: both;
 }
 
-/*
-#tabbed-content li{
-    display: inline-block;
-    padding: 10px 14px;
-    background: #ddd;
-    border-radius: 4px;
-    cursor: pointer;
-    margin-right: 10px;
+#add-book #hide{
+    width: 30px;
 }
 
+#add-book label{
+    line-height: 52px;
+}
+
+/*
 #tabbed-content .tab{
     display: none;
     border: 1px solid #ddd;
