Using the Google Books API

Written on October 17, 2019

I created a webpage that would pull data from my personal “Library” on Google Books and display the book information on the screen through the Google Books API. In my project, I used a combination of HTML, CSS, JavaScript, and the Mustache template system to achieve this. SEE THE FINAL VERSION OF MY GOOGLE BOOKS LIBRARY

_config.yml

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.

See the Pen Library HTML by Brittney Miller (@brittney092289) on CodePen.


Next, I needed to add the JavaScript so I could pull the data from the Google Books API. The data was then able to be populated inside the div with the ID ‘booklist’.

First of all, I use jQuery because it takes common JavaScript tasks and turns them into methods that can then be easily called with simple lines of code. Similarly, I use Mustache as a template to provide the information to display in the HTML container by placing the data properties inside tags (the curly braces…get it? They look like tiny mustaches).

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.

See the Pen Library HTML full by Brittney Miller (@brittney092289) on CodePen.


Now, that’s just like magic!⚡️ SEE THE FINAL VERSION OF MY GOOGLE BOOKS LIBRARY