diff --git a/‎app.js‎
Lines changed: 10 additions & 0 deletions b/‎app.js‎
Lines changed: 10 additions & 0 deletions
diff --git a/‎index.html‎
Lines changed: 2 additions & 1 deletion b/‎index.html‎
Lines changed: 2 additions & 1 deletion
diff --git a/‎styles.css‎
Lines changed: 9 additions & 0 deletions b/‎styles.css‎
Lines changed: 9 additions & 0 deletions
@@ -33,3 +33,13 @@ addForm.addEventListener('submit', function(e){
   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";
+  }
+});
@@ -38,10 +38,11 @@ <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>
-
     </div>
     <script src="app.js"></script>
   </body>
 
@@ -91,6 +91,7 @@ h1, h2{
     box-sizing: border-box;
     width: 300px;
     float: left;
+    clear: both;
 }
 
 #add-book button{
@@ -115,6 +116,14 @@ h1, h2{
     clear: both;
 }
 
+#add-book #hide{
+  width: 30px;
+}
+
+#add-book label{
+  line-height: 52px;
+}
+
 /*
 #tabbed-content li{
     display: inline-block;