Create a jQuery Mobile Web App to find books using ISBN

In this post, we are going to create a mobile web app to find books detail using their ISBN. We will be using jQuery Mobile framework to create our user interface. We will be getting all the info through ISBN Lookup API.

ISBN Lookup is free API which is free to use and requires no API key. You can read about this API on their website.

find books using isbn

Creating the user interface:

First, we will be creating our user interface using the jQuery mobile framework which is great for creating mobile web apps which look good on any mobile platform.

<span id="wetop">
 <span id="icon"></span>
 <h1 id="brand"></h1> </span>
 <div data-role="main" class="ui-content">
 <ul data-role="listview" data-inset="true">
 <li data-icon="false">Name : <span id="title"></span></li>
 <li data-icon="false">EAN : <span id="ean"></span></li>
 <li data-icon="false">ISBN : <span id="isbn"></span></li>
 <li data-icon="false">Author : <span id="author"></span></li>
 <li data-icon="false">Publisher : <span id="publisher"></span></li>
 <li data-icon="false">More Info : <span id="link"></span></li>
 </ul>
 </div>

Using jQuery mobile components we will create our homepage and search page. The search will page will have just one input field for entering the book ISBN number. All the fields responsible for displaying the generated data are given unique id which will allow us to grab data from our JavaScript code.

isbn search find books

Using the API to find books:

ISBN Lookup API returns the result in JSON format which is then using JavaScript passed on to the home page.  Using GET method we will send a request to the API. by appending a variable at the which will have our ISBN number. In return, we will receive the result in a JSON format which will contain the information about the book. We will format this result to properly display in our jQuery app.

The sample JSON response looks like this:

{
 "author": "R.S. Aggarwal", 
 "brand": "S Chand &amp;amp; Co Ltd", 
 "detail_page_url": "https://www.amazon.com/Modern-Approach-Verbal-Non-Verbal-Reasoning/dp/8121905516?SubscriptionId=AKIAJ4KPYGHA4KM3PV2Q&amp;amp;tag=wwwthewindows-21&amp;amp;linkCode=xm2&amp;amp;camp=2025&amp;amp;creative=165953&amp;amp;creativeASIN=8121905516", 
 "ean": "9788121905510", 
 "isbn": "8121905516", 
 "large_image": {
 "height": "500", 
 "url": "https://images-na.ssl-images-amazon.com/images/I/51MzfgxAnTL.jpg", 
 "width": "356"
 }, 
 "medium_image": {
 "height": "160", 
 "url": "https://images-na.ssl-images-amazon.com/images/I/51MzfgxAnTL._SL160_.jpg", 
 "width": "114"
 }, 
 "publisher": "S Chand &amp;amp; Co Ltd", 
 "title": "A Modern Approach to Verbal &amp;amp; Non-Verbal Reasoning"
}

Now we will create our JavaScript code to handle the API request. Firstly we will grab the ISBN number from the search field. Then we will assign this ISBN number to a variable. This newly created variable will be passed along the URL to grab the JSON request.  You can have the look at the code below to understand how it’s happening.


$(document).ready(function () {
$('#fname').on('keyup', function (e) {
let fname = e.target.value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(xhttp.responseText);
var icon = `<img src="${response.medium_image.url}" width="125px" height="">`;
var ean = response.ean;
var author = response.author;
var brand = response.brand;
var title = response.title;
var isbn = response.isbn;
var author = response.author;
var publisher = response.publisher;
var link = `<a href="${response.detail_page_url}">Check Details</a>`;
document.getElementById('icon').innerHTML = icon;
document.getElementById('brand').innerHTML = brand;
document.getElementById('title').innerHTML = title;
document.getElementById('isbn').innerHTML = isbn;
document.getElementById('author').innerHTML = author;
document.getElementById('publisher').innerHTML = publisher;
document.getElementById('link').innerHTML = link;
document.getElementById('ean').innerHTML = ean;
}
};
xhttp.open("GET", "http://isbnlocator.com/api/v1/book/?isbn=" + fname, true);
xhttp.send();
});
});

In this above example code, you can see that we are targeting each HTML elements by their unique ID’s to show the result. From the following example, you can see that it’s fairly simple and easy to build an application like this. Using jQuery mobile we can give our web app a more native mobile app look.

You can download the complete code from here.

Leave a Reply