lesson 15 code

iamshaunjp · iamshaunjp · commit 9a8131cb7940 · 2017-08-11T10:00:04.000+01:00
diff --git a/app.js b/app.js
@@ -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";
+  }
+});
diff --git a/index.html b/index.html
@@ -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>
diff --git a/styles.css b/styles.css
@@ -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;
