Using the Google Books API
The first thing I needed to do was create a basic container for my booklist data to live in. To do so, I created a basic HTML document with a header and description, and some basic inline styling. Another thing I did was generate my personal Google Books API key.
So, the first block of code is creating a template for displaying the books on the page by pulling the book ID, the book thumbnail and the book title from my Google Books library. I then added a class called “bookdetails” which generates from the next Mustache template I created. I have the book details div hidden until the user triggers the onClick function.
The book details template generates the data and is applied to the “booklisttemplate” template. As a result, this template includes the all of the fine details of the individual book.
Now on to the fun stuff, because this is where the previous templates come into play. I created functions that use my specific Google Books ID to show the books I have saved in my library by adding the templates into the original “booklist” div in the HTML. Also, I added a slide toggle function to show and hide the book details on click.
Finally, I added some CSS styling to style the booklist container.
Now, that’s just like magic!⚡️ SEE THE FINAL VERSION OF MY GOOGLE BOOKS LIBRARY