My Book Cloud

MBC introduction

Stop believing you hate to read! Reading a book is not boring!

How to find a good book?

MyBookCloud is the free online book search webpage everyone needs.

• You can browse books by your preferred author
• Order either by newest, relevance or best seller.

Use this free online book finder tool to create your own customized list of selected searched authors.

Description

This project allowed us to consolidate and apply the topics covered through this first 8 weeks (from HTML, CSS, JS through APIs). In our project we choose to use Google Books APIs and New Tork Times API. Our primary aim was to integrate both APIs to be able to do a search with a complete functional app.
We took the challenge to build a project that is the vivid example of a real work request I would get in a real job. This webpage is primarly focus to do a search by the favorite or requested authors anyone needs in a particular circunstance.

With the previous consideration:
GIVEN a book finder with form inputs
WHEN I search for an author in Google Book.
THEN I am presented with the posibility to order by relevance (default) or newest.
WHEN I type the author and select my prefered order, and send my request by a click.
THEN I am presented with the top 10 (newest or relevant) books of the selected author. The displayed information include title, image of book cover, author, category and date.
WHEN I like the author searched and results, and I click the like icon
THEN I save the search term for future display
WHEN I like the search experience and I click the heart icon
THEN my click will be counted 
WHEN I want to search by best sellers' author I use the New York Times input and after clicking "Go"
THEN I am again presented with best sellers of author selected.

• What did you learn?
  • Fetch in JavaScript with third-party APIs
  • Usage of classList in JavaScript combined with Foundaton
  • Use of buttons
  • Display of information associated with buttons
  • Displaying and removing information depending on the users input
  • Use of local storage

Languages Required:

• HTML
• CSS
• JavaScript
• Foundation
• Third-party APIS: Google Book API and New York Time APIs

Usage

My Book Cloud app includes 2 search options for Google Books and NY Times best sellers. A list of books, like button, a give love button that counts all the people that click in it. As well as a "Book Shelf", where the name of the book you are searching for will appear for further user comfort.

Resources

• https://developer.mozilla.org/es/docs/Web/API/Fetch_API/Using_Fetch
• https://www.javatpoint.com/javascript-localstorage
• https://stackoverflow.com/questions/16044031/list-of-buttons-and-javascript
• https://www.w3schools.com/howto/howto_js_close_list_items.asp
• https://api.jquery.com/event.stopImmediatePropagation/
• https://getbootstrap.com/
• https://get.foundation/index.html

Credits

• Enrique Del Castillo Chávez
• Nicolas Avena
• Sandra Ileana Pérez Álvarez

Tests

• Search Google Book and New York Times button working.
• Current book search displaying correctly.
• Button counting if user like experience.
• Recent search history displaying correctly.
• Like button displays the name of the search when double clicked.
• Alert message working when no input has been submited.

Link to website