JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<ul>
  <li>Press enter after typing to start fetching.</li>
  <li>You get no results if none of the matching books have ISBN, since that is the only thing we really need.
    <ul>
      <li>If this happens, you may want to check the query url directly... and perhaps edit the "maxResults" parameter.</li>
    </ul>
  </li>
</ul>

<label for="">
  Title:
  <input type="text" id="title" value="I Am legend">
</label>

<label for="">
  Author:
  <input type="text" id="author" value="Richard Matheson">
</label>


<div id="dump"></div>

SCSS

body {
  margin: 20px;
}

body > ul {
  border: 1px solid #c1c1c1;
  color: #444;
  padding: 20px;
  padding-left: 40px;
  font-family: 'Helvetica', sans-serif;
  font-size: 13px;
}

label {
  display: block;
  margin: 30px;
  display: flex;
  flex-direction: row;
  input { flex-grow: 1; margin-left: 6px; }
}

#dump {
  margin: 30px;
  border-top: 3px solid #e1e1e1;
  padding-top: 30px;
  textarea {
    width: 100%;
    resize: vertical;
    height: 77px;
  }
}

JavaScript

var author,title;

$('#author, #title').on("change", function() {

	var author = $('#author').val().trim();
	var title = $('#title').val().trim();
  
  $('#dump').html("Couldn't find a match with ISBN <br>...");
  fetchBook( author, title );

});

$('#author').trigger('change');


function fetchBook( author, title ) {
  console.log('!!!!!!!!!!!!!!!!!!!!!!!!!!!!', title);
  // https://developers.google.com/books/docs/v1/using  
  var query = (title ? 'intitle:' + encodeURIComponent( title ) : '') + (author ? '+inauthor:' + encodeURIComponent( author ) : '');
  query = 'https://www.googleapis.com/books/v1/volumes?showPreorders=true&maxResults=4&q=' + query;
  console.log('QUERY:');
  console.log(query);

	// Prep name and title for comparison
  var lowercase_author = _.lowerCase( author );
  var lowercase_title = _.lowerCase( title );
  
  axios.get( query ).then(function (response) {

		console.log('API RESPONSE:');
    console.log(response);
    
    // Succesful response with items...
    if ( response.status >= 200 && response.status < 300 && response.data.totalItems ) {

      var books = response.data.items;
      // Return book only if author and title are an exact match and if it has an isbn number....
      // For the purposes of this fiddle, it's acceptable to be missing the author and title.
      var book = _.filter( books, function( book ) {
        var exists = {};
				// Finds query author in the array of authors in the API book
        exists.author = _.find( book.volumeInfo.authors, function( author ) { return _.lowerCase( author ) === lowercase_author; });
        // Title matching is more lenient in hopes to catch titles that contain additional fluff, like "Limited Edition"
        exists.title = _.lowerCase( book.volumeInfo.title ).lastIndexOf( lowercase_title ) > -1; 
        exists.isbn = _.find( book.volumeInfo.industryIdentifiers, function( o ) {
					return o.type === 'ISBN_10' || o.type === 'ISBN_13';
				});
        
        return...