<!--
generate a new random quote
generate a random color for background
enable sharing buttons for twitter (half enabled) and tumbler
-->
<div class="container quoteFrame">
<div class="quote">
<p><i class="fa fa-quote-left"></i>
<span id="quoteText">Problems worthy of attack prove their worth by fighting back.</span></p>
<footer class="blockquote-footer"><span id="quoteAuthor">Someone Famous</span></footer>
</div>
<div class="buttons">
<div class="btn btn-primary">
<a id="shareTwitter" href="#"><i class="fa fa-twitter"></i></a>
</div>
<div class="btn btn-primary">
<a id="shareTumblr" href="#"><i class="fa fa-tumblr"></i></a>
</div>
<a id="getNewQuote" class="btn btn-primary" style="float:right;">New quote</a>
</div>
</div>
<div class="footer text-center">
<p class="smaller">by <a href="https://codepen.io/tonalmasher/">aram</a></p>
</div>
/*
*
* To change colors you target --main-bg-color in: html
*
*/
html {
--main-bg-color: #9003fc;
}
body {
background-color: var(--main-bg-color);
font-family: Raleway;
}
.quoteFrame {
border-radius: 3px;
position: relative;
margin: 8% auto auto auto;
max-width: 550px;
padding: 40px 50px;
display: table;
background-color: #fff;
}
.quoteFrame p {
text-align: center;
font-weight: 500;
font-size: 1.75em;
}
.quoteFrame footer {
text-align: right;
padding-top: 10px;
}
.buttons {
padding-top: 20px;
}
.btn, .btn:hover {
background-color: var(--main-bg-color);
border-color: var(--main-bg-color);
}
.btn:hover {
opacity: 0.8;
}
.fa {
color: var(--main-bg-color);
}
.quoteFrame .buttons a, .quoteFrame .buttons a:hover {
color: white;
}
.fa-twitter, .fa-tumblr {
color: white;
font-size: 18px;
}
.smaller {
padding-top: 1rem;
font-size: 12px;
color: white;
}
.smaller a:visited {
color: white;
}
$(document).ready(function() {
$("#getNewQuote").on("click", function(){
/* request from forismatic API */
var source= "https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?";
$.getJSON(source, function(response) {
/* Change the text inside of #currentQuote*/
var forismaticResponse = JSON.stringify(response);
/* convert the stringify result into an object */
var newQuote = JSON.parse(forismaticResponse);
$("#quoteText").html(newQuote.quoteText);
$("#quoteAuthor").html(newQuote.quoteAuthor);
$("#shareTwitter").html("<a id='shareTwitter' href='https://www.twitter.com/share?url=" + newQuote.quoteLink + "&text=" + newQuote.quoteText + "'" + "target='_blank'><i class='fa fa-twitter'></i></a>");
$("#shareTumblr").html("<a id='shareTumblr' href='https://www.tumblr.com/share?url=" + newQuote.quoteLink + "'" + "target='_blank'><i class='fa fa-tumblr'></i></a>");
/* Random color generater code from https://stackoverflow.com/questions/5092808/how-do-i-randomly-generate-html-hex-color-codes-using-javascript */
$("html").css("--main-bg-color", function(){
var color = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
if ( color == '#ffffff'){
return '#f1f1f1';
} else return color;
});
});
});
});