Capillary Challenge

by arunzo

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="header">
  <div id="counter">

    <p id="total-books">
      Total Books:XXX
    </p>


  </div>
  <h3>BookHub</h3>
  <p>One stop destination for your book search.</p>
</div>
<div class="app-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">

        
            <div class="input-group">
              <span class="input-group-addon" id="sizing-addon2">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
              </span>
              <input type="text" id="search-box" class="form-control" placeholder="Enter your search term" aria-describedby="sizing-addon2">
            </div>
          

          
        

        <div id="results" class="results">
        </div>

      </div>
      <div class="col-md-8">

        <div class="banner">


          <div class="row book-row">


            <div class="col-md-4">
              <div class="thumbnail">
                <img id="book-image" src="" class="img-responsive">
              </div>
            </div>
            <div class="col-md-8">

              <div class="panel panel-default">
                <div class="panel-heading">Details</div>
                <div class="panel-body">
                  <p id="book-publisher">Publisher : --</p>
                  <p id="book-isbn">ISBN : --</p>
                  <p id="book-binding">Binding : --</p>
                  <p id="book-rating">Rating : --</p>
                </div>
              </div>

            </div>

          </div>

          <div class="panel panel-default">
            <div class="panel-heading">Description</div>
            <div id="book-description" class="panel-body">
              Click a link on the...

CSS

body {
  background-color: #faf9e6;
  font-family: 'Raleway', sans-serif;
}

.header {
  background-color: #e5e065;
  min-height: 45px;
  font-family: 'Open Sans Condensed', sans-serif;
  margin-top: 0px;
  padding: 5px 15px;
  color: #fff;
}

.header>h3 {
  font-weight: bold;
  font-family: 'Kaushan Script', cursive;
}

.header>p {
  font-size: large;
}

#counter {
  float: right;
  margin: 25px 15px;
  font-size: large;
}

#counter table {
  border-width: 1px solid white;
}

.app-content {
  margin-top: 15px;
}

.results {
  margin-top: 15px;
  border-radius: 5px;
  background-color: white;
  min-height: 450px;
  max-height: 500px;
  overflow-y: scroll;
}

.result {
  padding: 7px 7px;
  margin-left: 5px;
  margin-right: 5px;
  border-bottom: 1px solid #ddd;
}

.result:focus {
  background-color: black;
}

.result:last-child {
  border-bottom: none;
}

.banner {
  margin-top: 15px;
  border-radius: 5px;
  background-color: white;
  padding: 15px 15px;
  min-height: 500px;
}

.thumbnail {
  min-height: 250px;
}

.bookmark-bar {
  margin-bottom: 5px;
  float: right;
}

.share-row {
  margin-bottom: 10px;
}

JavaScript

var books = {
  BooksList: [],
  ViewList: [],

  TotalBooks: 0,

  searchBooks: function(term) {
    var result = $.grep(BooksList.books, function(e) {
      if (e.author.match(term) != null || e.name.match(term) != null) {
        return e;
      }
    });
    $("#results").empty();
    ViewList = result;
    $(result).each(function() {
      books.addBookstoView(this);
    });
  },

  showBookDetails: function(BookID) {
    var result = $.grep(BooksList.books, function(e) {
      return e.id == BookID;
    });
    console.log(result[0]);
    $("#book-image").attr("src", result[0].image);
    $("#book-publisher").text("Publisher :" + result[0].details.Publisher);
    $("#book-isbn").text("ISBN: " + result[0].details.ISBN);
    $("#book-binding").text("Binding: " + result[0].details.Binding);
    $("#book-rating").text("Rating :" + result[0].rating);
    $("#book-description").text(result[0].description);
  },

  addBookstoView: function(BookData) {
    var $tempHTML = $('<a><div class="result"><p class="pull-right price">Price</p><p class="title">Title</p><p class="author"></p></div></a>');
    $tempHTML.attr("href", "#BookID=" + BookData.id)
    $tempHTML.attr("data-bookID", "" + BookData.id)
    $tempHTML.find(".title").html(BookData.name);
    $tempHTML.find(".price").html(BookData.price);
    $tempHTML.find(".author").html("Author :" + BookData.author);
    $("#results").append($tempHTML);

  },

  fillBooks: function() {
    $.ajax({
      url: "https://capillary.0x10.info/api/books?type=json&query=list_books",
      dataType: "text",
      success: function(data) {
        BooksList = $.parseJSON(data);
        ViewList = BooksList;
        $(BooksList.books).each(function() {
          books.addBookstoView(this);
        });
        $("#total-books").text("Total Books:" + BooksList.books.length);

      }
    });
  }




}



$(document).ready(function() {
  books.fillBooks();
});

$("#search-box").bind("propertychange change click keyup input paste",...