From d7ea294ab93c437f52dfc0d9383e6d45beb09713 Mon Sep 17 00:00:00 2001
From: Adam Undus <adam.undus@neuraflash.com>
Date: Thu, 5 Nov 2020 13:05:52 -0500
Subject: [PATCH] add remove functionality to my booklist pg

---
 booklist.js | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/booklist.js b/booklist.js
index 020fbf5..2eb2d5b 100644
--- a/booklist.js
+++ b/booklist.js
@@ -20,18 +20,30 @@ const displayUsingApi = false;
     const body = $('#book-list')
 
     Object.keys(list).forEach((bookId) => {
-      console.log(bookId)
-      body.append(makeListItem(list[bookId]))
+      body.append(makeListItem(bookId, list[bookId]))
     })
   }
 
-  function makeListItem(book) {
+  $('.remove-from-booklist').on('click', (event) => {
+    const target = $(event.target)
+    const bookId = target.parent().attr('id')
+    console.log(bookId)
+    removeBook(bookId)
+    location.reload()
+  })
+
+  function removeBook (id) {
+    const newlist = JSON.parse(localStorage.getItem('booklist'))
+    delete newlist[id]
+    localStorage.setItem('booklist', JSON.stringify(newlist))
+  }
+
+  function makeListItem (id, book) {
     const a = `<a href="${book.url}"><h3>${book.title}</h3></a>`
-    const li = `<li><div class="list-item"><img src="${book.imgSrc}"/>${a}<span>Author: ${book.author}</span><div><div class="social-button booklist">
-        <button title="Add book to My Book List" id="add-to-booklist"
-            style="background-color: cornflowerblue;">+</button>
+    const li = `<li><div id="${id}" class="list-item"><img src="${book.imgSrc}"/>${a}<span>Author: ${book.author}</span>
+        <button title="Remove From Booklist" class="remove-from-booklist"
+            style="background-color: indianred;">-</button>
     </div></li>`
-    console.log(li)
     return li
   }
 })(jQuery) // eslint-disable-line