JSFiddle - React, Tailwind, and code Playground

by chrisfitzpat

HTML

<h1>Some Books</h1>

<div id="0719088682" class="bookcover"></div>
<div id="3642345972" class="bookcover"></div>
<!-- NEXT TWO ARE NOT AVAILABLE IN GOOGLE -->
<div id="0953940349" class="bookcover"></div>
<div id="NOTANISBN" class="bookcover"></div>
<!-- BUT THIS ONE IS --> 
<div id="110703597X" class="bookcover"></div>

CoffeeScript

@App = {} 

class App.Bookcovers 
  constructor: (isbns) ->
    @url =  "http://books.google.com/books?jscmd=viewapi&bibkeys=#{isbns.join(',')}&callback=?"
  getBookcovers: =>
    $.getJSON @url, {}, (data) =>
      this.insertBookcovers(data)
  insertBookcovers: (gData) =>
    for id, book of gData
      bookcoverContainer = $("##{id.replace 'ISBN:', '' }")
      unless typeof (book.thumbnail_url) is "undefined"
        img = document.createElement("img")
        img.src = book.thumbnail_url
        bookcoverContainer.append img
        bookcoverContainer.toggleClass "bookcover bookcovered"
    $('.bookcover').each -> $(this).append "Bookcover Not Available"
      
# Jquery plugin to add bookcovers
$.fn.extend
  addBookcovers: ->
    isbns = []
    @each ->
      isbns.push "ISBN:#{this.id}"
    bookcoverGetter = new App.Bookcovers(isbns)
    bookcoverGetter.getBookcovers() if isbns.length > 0
        
$ ->
  $('.bookcover').addBookcovers()