Add the ability for Drag-Drop-Sort feature to the book playlist.

Should be able to grab the book element, and drag the book element to a new position and drop it in the book playlist in the new position.

Resources to look at:

• https://github.com/SortableJS/Sortable
• https://sortablejs.github.io/Sortable/

• Add Copywrite license .txt file to the repo
• and insert section in README.md

README.md section example text:

License

Distributed under the MIT License. See LICENSE.txt for more information.

Favorited books page will throw a 500 'Internal Server' Error if an unread book is marked as favorited.

I believe this has to do with unread books not having a completionDate key/value. The favorite-books.ejs file cannot render code that contains completionDate and will throw a server error.

eg. (see lines 139 - 142)
Completed on: <%= ${elem.completionDate.getMonth()} . . . %>

Update style.css & main.js
Add functionality to toggle hamburger button open and close 'on click'.

Reference image (Hamburger Button on mobile):

Should display full side bar:

1. Fix typo: empty - [ ] does not display checkbox. To fix, either add content after - [ ] or remove checkbox.
2. Add planned features to the Roadmap section. (eg. drag and drop sortable elements).

Reference Issue Image:

On mobile, the autosuggestions content in the "Add Book to Playlist" modal overflows the container.

Reference Issue Image:

Content should fit container width and crop text that does not fit container width/line with an ellipsis.

Example fix:

Images from the Google Books API are formated at HTTP://<image url>
To prevent mixed content, manually fix to HTTP**S**://<image url>

Reference Error:

Reference Error detail on Image URL:

Trigger - How to repeat issue:
Sometimes occurs when refreshing The Bookly Books Playlist Page or navigating from another page back to the Playlist page.

Issue:
A random book edit modal pop-up will open and close immediately on page load. There should be no pop-up on page load.

Reference Issue Gif:

As the Discover page fetches data from the NYTimes books API, there is a noticeable delay when first loading the Bookly site before the book images/data are rendered to the page.

Try implementing a skeleton loader that appears before the book images are rendered to the browser. Have a look at this FCC tutorial for an implementation example.

eg.

In the "Info" modal for each book, the favorite book buttons are displayed incorrectly and will listen on incorrect book elements.

The favorite book buttons from each inactive modal appear to be visible even though visibility is set to hidden.

The issue code block is marked from line 213 - 223, in the index.ejs file.

Reference issue video:

Added incorrect "Lessons Learned" section in the README.md from another repo. Update the text to reflect the correct Bookly app repo "Lessons Learned."

Reference issue image: