Skip to content

Instantly share code, notes, and snippets.

@jasonclark

jasonclark/booklist-lhuede.html

Created November 19, 2012 22:00
Show Gist options
  • Save jasonclark/4114336 to your computer and use it in GitHub Desktop.
Save jasonclark/4114336 to your computer and use it in GitHub Desktop.
Download ZIP
Book Review List using Google Spreasheet API and jQuery
Raw
booklist-lhuede.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Reading List</title>
<style type="text/css">
.items {display:table;list-style:none;margin:0;padding:0;border-spacing:5px;}
.items li {display:table-row;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;border:1px solid #ccc;padding:5px;margin:0 0 10px 0;}
.items li img {display:table-cell;vertical-align:top;height:100px;width:100px;}
.items li span.meta {display:table-cell;vertical-align:top;margin:0;padding:0 0 0 5px;}
.items li {margin:0 0 5px 0;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//source file is http://spreadsheets.google.com/feeds/list/0AmeixSiX9c-BdDZfR2oyRDBfa0NCcUZqTXRmMHNjNXc/od6/public/values?alt=json-in-script
$(function listBooks() {
$.getJSON( "https://spreadsheets.google.com/feeds/list/0AmeixSiX9c-BdDZfR2oyRDBfa0NCcUZqTXRmMHNjNXc/od6/public/values?alt=json-in-script&callback=?",
function (data) {
$('div#book-list').append('<ul class="items"></ul>');
$.each(data.feed.entry, function(i,entry) {
var item = '<span style="display:none">' + entry.id.$t + '</span>';
item += '<img src="' + entry.gsx$imageurl.$t + '"/>';
item += '<span class="meta"><a href="' + entry.gsx$worldcataloguelink.$t + '">' + entry.gsx$title.$t + '</a>';
item += '<br/>Author: ' + entry.gsx$author.$t;
item += '<br/>Genre: ' + entry.gsx$genre.$t;
item += '<br/>Review &amp; Reviewer: <a href="' + entry.gsx$linktoyourblogwebsiteorgoodreadspage.$t + '">' + entry.gsx$yourname.$t + '</a>';
item += '<br/>Review Date: ' + entry.gsx$timestamp.$t;
$('.items').append('<li>' + item + '</span></li>');
});
});
});
});
</script>
</head>
<body>
<h1>Reading List</h1>
<div id="book-list"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment