<div class="vertical-center">
<div class="johnbotron" hidden>
<h1>Irish Writer's Quotes</h1>
<div class="quote animated fadeIn fadeOut">
<p id="quoteText"></p>
<h2 id="quoteAuthor"></h2>
<h4 id="quoteSource"></h4>
</div>
<div id="buttons">
<button disabled id="tweetThis">Tweet This</button>
<button disabled id="newQuote">New Quote</button>
</div>
</div>
</div>
body {
background-color: #008c41;
background-image: url("https://s3-eu-west-1.amazonaws.com/jjmax/images/crisp-paper-ruffles.png"); /* http://www.transparenttextures.com/ */
font-family: 'Playfair Display', serif;
font-size: 24px;
line-height: 1.6em;
}
button {
padding: .75em 1.5em;
font-size: 1.2em;
border: 1px solid;
border-radius: 6px;
color: #FFF;
margin: 10px;
cursor: pointer;
}
button#tweetThis {
background-color: #00aced;
border-color: #c0deed;
}
button#tweetThis:hover {
background-color: #0084b4;
border-color: #1dcaff;
}
button#newQuote {
background-color: #FF6600;
border-color: #ffcc00;
}
button#newQuote:hover {
background-color: #ffcc00;
border-color: #ffff66;
}
#buttons {
margin-top: 3em;
display: flex;
justify-content: space-around;
flex-wrap:wrap;
}
h1, h2, h4, button {
font-family: 'Josefin Sans', sans-serif;
}
h1 {
text-align: center;
}
.johnbotron {
background-color: rgba(200,200,200,0.2);
width: 75vw;
min-height: 80vh;
padding: 1vw 2vw;
border-radius: 6px;
color: #222;
}
.vertical-center {
min-height: 100%;
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 992px) {
body {
font-size: 99%;
}
}
@media screen and (max-width: 768px) {
body {
font-size: 97%;
}
}
// http://www.alatechsource.org/blog/2012/05/using-the-google-spreadsheets-data-api-to-build-a-recommended-reading-list-code-words.h
// https://api.jquery.com/jquery.getjson/
var QUOTES;
$(document).ready(function() {
$(function getQuotes() {
var quotes = [];
$.getJSON("https://spreadsheets.google.com/feeds/list/115r5VrCWT77oXxtJexGpg_Cif-2zg_5EbpMYtGIdTZk/od6/public/values?alt=json-in-script&callback=?",
function(data) {
$.each(data.feed.entry, function(i, entry) {
var currID = quotes.length;
quotes.push({
id: currID,
writer: entry.gsx$writer.$t,
quote: entry.gsx$quote.$t,
source: entry.gsx$source.$t
});
});
setQuotes(quotes);
});
});
});
function setQuotes(quotes) {
QUOTES = quotes;
var href = window.location.href;
var pathArray = href.split('?');
if (Number(pathArray[pathArray.length - 1])) {
getRandomQuote(QUOTES[pathArray[pathArray.length - 1]]);
} else {
getRandomQuote(QUOTES);
}
$('.johnbotron').prop('hidden', false);
$('button').prop('disabled', false);
}
function getRandomQuote(quotes) {
if (quotes.length > 1) {
var randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
displayQuote(randomQuote);
} else {
displayQuote(quotes);
}
}
function displayQuote(quote) {
$("div.quote p#quoteText").html(quote.quote);
$("div.quote h2#quoteAuthor").html(quote.writer);
$("div.quote h4#quoteSource").html(quote.source);
$("div.quote p#quoteText").attr("data-quote-id", quote.id);
$(".quote").removeClass("fadeOut");
$("#tweetThis").addClass("animated bounce");
}
$('#newQuote').click(function() {
$(".quote").addClass("fadeOut");
$("#tweetThis").removeClass("animated bounce");
setTimeout('getRandomQuote(QUOTES)', 1000);
});
$('#tweetThis').click(function() {
var quoteID = $("div.quote p#quoteText").attr("data-quote-id");
var quoteURL = 'https://codepen.io/jjmax/full/dYNvgK?' + quoteID;
var formURL = "https://twitter.com/intent/tweet?url=" + quoteURL + "&text=A%20great%20quote%20from%20an%20Irish%20writer&via=behanj";
window.open(formURL);
});
Also see: Tab Triggers