lesson 12 code

Shaun Pelling · Shaun Pelling · commit 83b0916e951d · 2017-08-11T09:36:17.000+01:00
diff --git a/app.js b/app.js
@@ -1,4 +1,5 @@
 const list = document.querySelector('#book-list ul');
+const forms = document.forms;
 
 // delete books
 list.addEventListener('click', (e) => {
@@ -8,17 +9,24 @@ list.addEventListener('click', (e) => {
   }
 });
 
-const forms = document.forms;
-console.log(forms);
-console.log(forms['add-book']);
-
-Array.from(forms).forEach(function(form){
-  console.log(form);
-});
-
+// add books
 const addForm = forms['add-book'];
 addForm.addEventListener('submit', function(e){
   e.preventDefault();
+
+  // create elements
   const value = addForm.querySelector('input[type="text"]').value;
-  console.log(value);
+  const li = document.createElement('li');
+  const bookName = document.createElement('span');
+  const deleteBtn = document.createElement('span');
+
+  // add text content
+  bookName.textContent = value;
+  deleteBtn.textContent = 'delete';
+
+  // append to DOM
+  li.appendChild(bookName);
+  li.appendChild(deleteBtn);
+  list.appendChild(li);
+  //list.insertBefore(li, list.querySelector('li:first-child'));
 });
