@@ -1,35 +1,45 @@
-const list = document.querySelector('#book-list ul')
+const list = document.querySelector('#book-list ul');
+const forms = document.forms;
 
-//delete books
-list.addEventListener('click', function(e){
-    if(e.target.className == 'delete'){
-        const li = e.target.parentElement;
-        list.removeChild(li)
-    }
-})
+// delete books
+list.addEventListener('click', (e) => {
+  if(e.target.className == 'delete'){
+    const li = e.target.parentElement;
+    li.parentNode.removeChild(li);
+  }
+});
 
-// add books-list
- const addForm = document.forms['add-book'];
+// add books
+const addForm = forms['add-book'];
+addForm.addEventListener('submit', function(e){
+  e.preventDefault();
 
- addForm.addEventListener('submit',function(e){
-     e.preventDefault();
-     const value = addForm.querySelector('input[type="text"]').value;
- 
-    //create elements
-    const li = document.createElement('li');
-    const bookName = document.createElement('span');
-    const deleteBtn = document.createElement('span');
+  // create elements
+  const value = addForm.querySelector('input[type="text"]').value;
+  const li = document.createElement('li');
+  const bookName = document.createElement('span');
+  const deleteBtn = document.createElement('span');
 
-    // add content
-    deleteBtn.textContent = 'delete'
-    bookName.textContent = value
+  // add text content
+  bookName.textContent = value;
+  deleteBtn.textContent = 'delete';
 
-    // add classes
-    bookName.classList.add('name');
-    deleteBtn.classList.add('delete');
-    
-    // append to document
-    li.appendChild(bookName);
-    li.appendChild(deleteBtn);
-    list.appendChild(li);
- });
+  // add classes
+  bookName.classList.add('name');
+  deleteBtn.classList.add('delete');
+
+  // append to DOM
+  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";
+  }
+});