Question: please help with the following html page: Use Google Books API Use jQuery AJAX functions (.ajax, .get, or .getJSON, etc.) All of the following functionalities

please help with the following html page:

Use Google Books API

Use jQuery AJAX functions (.ajax, .get, or .getJSON, etc.)

All of the following functionalities should be implemented in the same page.

Book search functionality: for users to search books by key terms.

A textbox to accept user input of search terms.

Search for books by calling the Google Books search API.

Display the first 50 results in 5 result pages (10 books for each page; note the page here does not mean the actual web page but page view). Style the page number as links or buttons similar to the following examples. Clicking on a page number will automatically perform a search and display the correct result page. Clearly indicate which result page is being displayed.

Just display limit information like the book title or cover image in search results.

Display book details: when a book is clicked/selected from the search results, the details about the book should be displayed in a section below or to the right of the results division.

Display books from one of your public bookshelves on the same page. Display the books using the same style used for the search results. Clicking on a book will display the detailed book information just like the last functionality.

Google Books Search

function B_Search() {

var search = document.getElementById('search').value;

var result = document.getElementById('results');

var resultString = "";

console.log(search);

$.ajax({

url: "https://www.googleapis.com/books/v1/volumes?q=id:"+ search,

dataType: "json",

success: function(data) { console.log(data);

for (i = 0; i

resultString += "

" + data.items[i].volumeInfo.title + "

";

resultString += "

" + data.items[i].volumeInfo.authors + "

";

resultString += "

Publisher: " + data.items[i].volumeInfo.publisher + "
";

resultString += "

publishedDate: " + data.items[i].volumeInfo.publishedDate + "
";

resultString += "

Description: " + data.items[i].volumeInfo.description + "
";

resultString += '

';

if (data.items[i].saleInfo.saleability == "FOR SALE") {

resultString += "

Price: " + data.items[i].saleInfo.retailPrice.amount + data.items[i].saleInfo.retailPrice.currencyCode + "
";

}

else {

resultString += "

Not for Sale
"

} } result.innerHTML = resultString; },

type: 'GET'

});

}

Book Search

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!