Last active
May 8, 2019 16:26
-
-
Save jasonclark/2626663 to your computer and use it in GitHub Desktop.
booklist HTML CSS and Javascript (complete file) - Using the Google Spreadsheets Data API to build a Recommended Reading List
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <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;} | |
| .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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> | |
| <script> | |
| $(document).ready(function() { | |
| //source Google Sheets file is https://docs.google.com/spreadsheets/d/1rX4_fInsYS7vOGpnXm1UklZgvU27FXl3UYu9lx9RHHU/ | |
| $(function listBooks() { | |
| $.getJSON( "https://spreadsheets.google.com/feeds/list/1rX4_fInsYS7vOGpnXm1UklZgvU27FXl3UYu9lx9RHHU/1/public/full?alt=json", | |
| 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="https://covers.openlibrary.org/b/isbn/' + entry.gsx$isbn.$t + '-S.jpg"/>'; | |
| item += '<span class="meta"><a href="https://www.worldcat.org/isbn/' + entry.gsx$isbn.$t + '">' + entry.title.$t + '</a>'; | |
| item += '<br/>Author: ' + entry.gsx$author.$t; | |
| if (entry.gsx$notes.$t) { | |
| item += '<br/>Description: ' + entry.gsx$notes.$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
Hi
What do I need to modify this project to a flashcard that the face of each card comes from on column in the spreadsheet and the back of the card retrieves data from another column of the spreadsheet?
Any help is greatly appreciated!