lesson 18 code

iamshaunjp · iamshaunjp · commit 6f26ff0384c1 · 2017-08-11T10:18:04.000+01:00
diff --git a/app.js b/app.js
@@ -1,76 +1,80 @@
-const list = document.querySelector('#book-list ul');
-const forms = document.forms;
+document.addEventListener('DOMContentLoaded', function(){
 
-// delete books
-list.addEventListener('click', (e) => {
-  if(e.target.className == 'delete'){
-    const li = e.target.parentElement;
-    li.parentNode.removeChild(li);
-  }
-});
+  const list = document.querySelector('#book-list ul');
+  const forms = document.forms;
 
-// add books
-const addForm = forms['add-book'];
-addForm.addEventListener('submit', function(e){
-  e.preventDefault();
+  // delete books
+  list.addEventListener('click', (e) => {
+    if(e.target.className == 'delete'){
+      const li = e.target.parentElement;
+      li.parentNode.removeChild(li);
+    }
+  });
 
-  // 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 books
+  const addForm = forms['add-book'];
+  addForm.addEventListener('submit', function(e){
+    e.preventDefault();
 
-  // add text content
-  bookName.textContent = value;
-  deleteBtn.textContent = 'delete';
+    // 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 classes
-  bookName.classList.add('name');
-  deleteBtn.classList.add('delete');
+    // add text content
+    bookName.textContent = value;
+    deleteBtn.textContent = 'delete';
 
-  // append to DOM
-  li.appendChild(bookName);
-  li.appendChild(deleteBtn);
-  list.appendChild(li);
-});
+    // add classes
+    bookName.classList.add('name');
+    deleteBtn.classList.add('delete');
 
-// hide books
-const hideBox = document.querySelector('#hide');
-hideBox.addEventListener('change', function(e){
-  if(hideBox.checked){
-    list.style.display = "none";
-  } else {
-    list.style.display = "initial";
-  }
-});
+    // append to DOM
+    li.appendChild(bookName);
+    li.appendChild(deleteBtn);
+    list.appendChild(li);
+  });
 
-// filter books
-const searchBar = forms['search-books'].querySelector('input');
-searchBar.addEventListener('keyup', (e) => {
-  const term = e.target.value.toLowerCase();
-  const books = list.getElementsByTagName('li');
-  Array.from(books).forEach((book) => {
-    const title = book.firstElementChild.textContent;
-    if(title.toLowerCase().indexOf(e.target.value) != -1){
-      book.style.display = 'block';
+  // hide books
+  const hideBox = document.querySelector('#hide');
+  hideBox.addEventListener('change', function(e){
+    if(hideBox.checked){
+      list.style.display = "none";
     } else {
-      book.style.display = 'none';
+      list.style.display = "initial";
     }
   });
-});
 
-// tabbed content
-const tabs = document.querySelector('.tabs');
-const panels = document.querySelectorAll('.panel');
-tabs.addEventListener('click', (e) => {
-  if(e.target.tagName == 'LI'){
-    const targetPanel = document.querySelector(e.target.dataset.target);
-    Array.from(panels).forEach((panel) => {
-      if(panel == targetPanel){
-        panel.classList.add('active');
-      }else{
-        panel.classList.remove('active');
+  // filter books
+  const searchBar = forms['search-books'].querySelector('input');
+  searchBar.addEventListener('keyup', (e) => {
+    const term = e.target.value.toLowerCase();
+    const books = list.getElementsByTagName('li');
+    Array.from(books).forEach((book) => {
+      const title = book.firstElementChild.textContent;
+      if(title.toLowerCase().indexOf(e.target.value) != -1){
+        book.style.display = 'block';
+      } else {
+        book.style.display = 'none';
       }
     });
-  }
-});
+  });
+
+  // tabbed content
+  const tabs = document.querySelector('.tabs');
+  const panels = document.querySelectorAll('.panel');
+  tabs.addEventListener('click', (e) => {
+    if(e.target.tagName == 'LI'){
+      const targetPanel = document.querySelector(e.target.dataset.target);
+      Array.from(panels).forEach((panel) => {
+        if(panel == targetPanel){
+          panel.classList.add('active');
+        }else{
+          panel.classList.remove('active');
+        }
+      });
+    }
+  });
+
+})
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <link href="styles.css" rel="stylesheet" />
+    <script src="app.js"></script>
     <title>JavaScript DOM Tutorials</title>
   </head>
   <body>
@@ -58,6 +59,5 @@ <h2 class="title">Books to Read</h2>
         </div>
       </div>
     </div>
-    <script src="app.js"></script>
   </body>
 </html>
