Welcome Folks I am back with another post. In this post we will be implementing Google Books API Pagination Example in Javascript. Just Follow the steps given below to make this application.
Before you Begin
Sign in to Firebase
Search By Author
Search By Title
Sort by Publish Date
First of all create index.html file for the webpage that we will see when we launch the app
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Google Books</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type='text/javascript' src='config.js'></script> <script type="text/javascript" src="script.js"></script> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div class="container"> <h1>Google Books</h1> <div id="searchBox"> <form id="searchForm" class="form-inline"> <input type="text" id="searchText"> <input type="submit" value="Search"> <select id="typeSearch"> <option value="-">-</option> <option value="Author">Author</option> <option value="Title">Title</option> </select> <select id="orderSearch"> <option value="Relevance">Relevance</option> <option value="Publish Date">Publish Date</option> </select> </form> </div> <div id="searchResultsText"></div> <div id="searchResults"></div> <div id="pagination"></div> </div> </body> </html> |
Create a style.css file for styling purposes
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
body{ font-size: 200%; } #searchResultsText{ margin: 1em 0 1em 0; display:block } #searchResults{ margin-top: 1em; } .bookPublish{ border-bottom: thin solid black; margin-bottom: 1em; } .bookTitleText, .bookAuthorText{ font-weight: bold; margin-bottom: 0.5em; } .bookAuthorText{ margin-top: 0.5em; } .bookAuthor{ margin-bottom: 0.5em; } .bookPublishText,.bookPublish{ font-size: 0.8em; } #previous{ margin-right: 1em; } |
Create a script.js file for the business logic of the application
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 |
$( document ).ready(function() { //Variables var _searchText; //variable to store the text the user inserted in the text box var _apiKey = ':keyes&key=' + config.MY_KEY; //variable containing the last parameter of the GET request and the API key var _apiURL = "https://www.googleapis.com/books/v1/volumes?q="; //variable containing the URL for the GET request var _searchType=""; //variable to define the type of search: author name or title var _maxResults = 10; //variable to control the amount of results per page var _startIndex = 0; //variable to control the position in the collection of volumes var _totalResults = 0; //variable that holds the total number of results fetched with the GET request var _orderType =""; //Variable that controls the results order - Relevance or Publish Date //function that handles the event after clicking "Search" or pressing ENTER key $( "#searchForm" ).submit(function( event ) { cleanData(); _searchText = $("#searchForm input:text").val(); //get the text value to be used as a search paramenter switch ($("#typeSearch").val()){ case "Author": _searchType = "+inauthor"; break; case "Title": _searchType = "+intitle"; break; case "-": _searchType =""; break; default: _searchType =""; } switch ($("#orderSearch").val()){ case "Relevance": _orderType = ""; break; case "Publish Date": _orderType = "&orderBy=newest"; break; default: _orderType = ""; } //tests if the text box is empty if (_searchText ==""){ //first clean all the things! cleanTotalResults(); cleanBooks(); cleanPagination(); cleanData(); //tell the user no text was found $("#searchResults").append("No search text found, please try again"); }else{//text box is not empty, procceed with search requestBooks(_searchText,_startIndex,_maxResults,_searchType,_orderType);} event.preventDefault(); }); //Submit event //Function that creates and sends the GET request to google API //it takes the searched text (_searchText), the staring index (_startIndex), the number of results to display (_maxResults) and the type of search (_sarchType) function requestBooks(_searchText,_startIndex,_maxResults,_searchType,_orderType){ //----Sending the GET request---- var _xhr = new XMLHttpRequest(); //initializing the XMLHttpRequest object //defining the request: type GET, URL made up from the variables defined earlier, true means asychronous var _url = _apiURL+_searchText+_searchType+_apiKey+"&startIndex="+_startIndex+"&maxResults="+_maxResults+_orderType; //defining the URL to send _xhr.open('GET', _url, true); _xhr.send(); //sends the request //creating an event listener tied to the "readystatechange" that launches the "processRequest" function _xhr.addEventListener("readystatechange", processRequest, false); function processRequest(e) { //readystate = 4 means Data is ready to be proccessed if (_xhr.readyState == 4 && _xhr.status == 200) { var _response = JSON.parse(_xhr.responseText); //transform the response text into a JSON object displayTotalResults(_response); displayResults(_response); createPagination(_response); } } } //requestBooks //function to create pagination function createPagination(_response){ cleanPagination(); _totalResults = _response.totalItems; //if _startIndex = 0 it means it's the first batch of book data //if _totalResults > _maxResults, it means there is more data to be fetched. if (_startIndex == 0 && _totalResults>_maxResults){ _previousIndex = _startIndex; _startIndex =_startIndex + _maxResults; $("#pagination").prepend("<a href='#' id='next'>Next</a>"); //create the function to handle a click to the newly added "NEXT" link $("#next").click(function() { requestBooks(_searchText,_startIndex,_maxResults,_searchType,_orderType); $('html, body').animate({ scrollTop: 0 }, 'slow'); //go to the top of the page, smoothly event.preventDefault(); }); }else{ // checks if _startIndex is lower than total results and if the itens to display are the same as the maximum results per page if (_startIndex !=0 && _startIndex < _totalResults && _response.items.length == _maxResults){ cleanPagination(); $("#pagination").prepend("<a href='#' id='previous'>Previous</a><a href='#' id='next'>Next</a>"); //create the function to handle a click to the newly added "NEXT" link $("#next").click(function() { _startIndex =_startIndex + _maxResults; requestBooks(_searchText,_startIndex,_maxResults,_searchType,_orderType); $('html, body').animate({ scrollTop: 0 }, 'slow'); //go to the top of the page, smoothly event.preventDefault(); }); //create the function to handle a click to the newly added "PREVIOUS" link $("#previous").click(function() { _startIndex =_startIndex - _maxResults; requestBooks(_searchText,_startIndex,_maxResults,_searchType,_orderType); $('html, body').animate({ scrollTop: 0 }, 'slow'); event.preventDefault(); }); //when all the other checks fail it means there are no further Books to get. Only the "Previous" link is shown and _startIndex is set back by _maxResults amount to get the previous Books }else{ if(_startIndex !=0){ cleanPagination(); //create the function to handle a click to the newly added PREVIOUS link $("#pagination").prepend("<a href='#' id='previous'>Previous</a>"); $("#previous").click(function() { _startIndex =_startIndex - _maxResults; requestBooks(_searchText,_startIndex,_maxResults,_searchType,_orderType); $('html, body').animate({ scrollTop: 0 }, 'slow'); ////go to the top of the page, smoothly event.preventDefault(); });} } } } //function to clean the pagination Div function cleanPagination(){ $("#pagination").empty(); } //function that writes the total number of results found function displayTotalResults(_response){ cleanTotalResults(); $("#searchResultsText").prepend("A total of <b>"+ _response.totalItems +"</b> results have been found with the keyword <b>"+ _searchText +"</b>"); }//displayTotalResults //function that takes the data from the Get Request and displays on the page function displayResults(_response){ cleanBooks(); for (i=0;i<_response.items.length;i++){ console.log(_response.items[i].volumeInfo.title) $("#searchResults").append("<div class ='bookTitleText'>Title</div>");//inserts the text "Title" into the DOM $("#searchResults").append("<div class ='bookTitle'>"+_response.items[i].volumeInfo.title+"</div>");//fetches the title from the GET request and inserts in the DOM $("#searchResults").append("<div class ='bookAuthorText'>Author</div>");//inserts the text "Author" into the DOM $("#searchResults").append("<div class ='bookAuthor'>"+_response.items[i].volumeInfo.authors+"</div>");//fetches the Author from the GET request and inserts in the DOM $("#searchResults").append("<div class ='bookPublishText '>Published:</div>");//inserts the text "Published Date" into the DOM $("#searchResults").append("<div class ='bookPublish'>"+_response.items[i].volumeInfo.publishedDate+"</div>");//fetches the Puslished Date from the GET request and inserts in the DOM } } //displayResults //function that cleans the total results text function cleanTotalResults(){ $("#searchResultsText").empty(); } //function that cleans the interface in order to display new Books data function cleanBooks(){ $("#searchResults").empty(); } //function that cleans the variables for a new search. function cleanData(){ _searchText =""; _searchType=""; _startIndex = 0; _previousIndex = 0; } }); //Document ready |
Lastly create a config.js file and include the api key for your project
|
1 2 3 |
var config = { MY_KEY : 'AIzaSyA0Qw2XhngxnR4YmaetQzJtgoBa7z4RJsY', } |
