Add support for all menu tabs in the event handler

* I didn't think about it when I did 0d8f56b

index.html

@@ -16,9 +16,9 @@
             </div>
 
             <ul class="menu">
-                <li>Library</li>
-                <li>Favorites</li>
-                <li>Trending</li>
+                <li class="library">Library</li>
+                <li class="favorites">Favorites</li>
+                <li class="trending">Trending</li>
             </ul>
          </div>
 

script.js

@@ -4,23 +4,23 @@ const searchType = document.querySelector('select');
 const input = document.querySelector('input#search');
 // book container
 const bookContainer = document.querySelector('div.books.container');
-const favBtn = document.querySelector('ul.menu li:nth-child(2)');
+const tabs = document.querySelectorAll('ul.menu li');
 
 const userBooks = {
     favorites: [],
-    read: []
+    library: []
 };
 
 input.addEventListener('keydown', handleEvent);
-favBtn.addEventListener('click', handleEvent);
+tabs.forEach( tab => tab.addEventListener('click', handleEvent));
 searchType.addEventListener('click', handleEvent);
 
 function handleEvent(event) {
     console.log(event, event.target.localName);
     if (event.key == 'Enter') {
         api.fetchLibrary();
     } else if (event.target.localName == 'li') {
-        api.showResults(userBooks.favorites);
+        api.showResults(userBooks[event.target.className]);
     } else if (event.target.localName == 'select') {
         input.focus();
     }