ajax/js/index.js

var apiUrl = 'https://www.googleapis.com/books/v1';

var allBooks = [];

var $booksList = $('#books-list'),
	$bookInfo = $('#book-info'),
	$formSearch = $('#form-search');

$formSearch.on('submit', function(event) {
	event.preventDefault();

	var queryString = $('[name=query]', this).val();

	getBook(queryString);
});

function getBook(query = '') {
	$.ajax({
		url: `${apiUrl}/volumes?q=${query}`,
		method: 'GET'
	})
	.done(response => {
		allBooks = response.items;

		$booksList.parents('.panel').show();

		allBooks.forEach(book => {
			$('<a>')
				.addClass('list-group-item')
				.attr('href', '')
				.text(book.volumeInfo.title)
				.appendTo($booksList)
				.attr('data-id', book.id)
				.on('click', function(event) {
					event.preventDefault();
					
					var id = $(this).data('id');

					var book = allBooks.find(item => item.id === id);

					$bookInfo.empty().hide().fadeIn();

					$('<div>')
						.addClass('panel-heading')
						.text( `${book.volumeInfo.title} | ${book.volumeInfo.authors.join(', ')} (${book.volumeInfo.publishedDate})` )
						.appendTo($bookInfo);

					$('<div>')
						.addClass('panel-body')
						.appendTo($bookInfo)
						.html(`
							<img src="${book.volumeInfo.imageLinks.thumbnail}" alt="${book.volumeInfo.title}" class="pull-left">
							<p>${book.volumeInfo.description}</p>
							<a href="${book.volumeInfo.previewLink}" target="_blank">Readmore...</a>
						`)
				})
		});
	})
	.fail(error => {
		console.log('error', error);
	});
}