added my follow along for forms with adding new book titles with the submit event listener.

rclarkem · rclarkem · commit b48249e6c7a9 · 2020-07-10T00:51:30.000-04:00
diff --git a/app.js b/app.js
@@ -1,24 +1,51 @@
-const list = document.querySelector('#book-list ul');
+const addBookForm = document.forms['add-book']
+const bookList = document.querySelector('#book-list ul')
 
-// delete books
-list.addEventListener('click', (e) => {
+
+addBookForm.addEventListener('submit', (e) => {
+  e.preventDefault()
+  let text = e.target.title.value
+  let newLi = createAndAppend('li', bookList, null, null, undefined)
+  let fSpan = createAndAppend('span', newLi, 'name', null, (e) => e.textContent = text)
+  let sSpan = createAndAppend('span', newLi, 'delete', null, (e) => e.textContent = 'delete')
+  e.target.title.value = ""
+})
+
+function createAndAppend(tagElem, parent, className, id, cb) {
+  let element = document.createElement(tagElem)
+  parent.append(element)
+  if (className !== null) {
+    element.className = className
+  }
+  if (id !== null) {
+    element.id = id
+  }
+  if (cb !== undefined) {
+    cb(element)
+  }
+  return element
+}
+// const list = document.querySelector('#book-list ul');
+//
+ delete books
+bookList.addEventListener('click', (e) => {
   if(e.target.className == 'delete'){
     const li = e.target.parentElement;
     li.parentNode.removeChild(li);
   }
 });
-
-const forms = document.forms;
-console.log(forms);
-console.log(forms['add-book']);
-
-Array.from(forms).forEach(function(form){
-  console.log(form);
-});
-
-const addForm = forms['add-book'];
-addForm.addEventListener('submit', function(e){
-  e.preventDefault();
-  const value = addForm.querySelector('input[type="text"]').value;
-  console.log(value);
-});
+//
+// const forms = document.forms;
+// console.log(forms);
+// console.log(forms['add-book']);
+//
+// Array.from(forms).forEach(function(form){
+//   console.log(form);
+// });
+//
+// const addForm = forms['add-book'];
+// addForm.addEventListener('submit', function(e){
+//   e.preventDefault();
+//   const value = addForm.querySelector('input[type="text"]').value;
+//   console.log(value);
+// });
diff --git a/index.html b/index.html
@@ -38,7 +38,7 @@ <h2 class="title">Books to Read</h2>
 	    	</ul>
 	    </div>
 	    <form id="add-book">
-	    	<input type="text" placeholder="Add a book..." />
+	    	<input type="text" name= "title" placeholder="Add a book..." />
 	    	<button>Add</button>
 	    </form>
 
