<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>
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(){
var source= "https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?";
$.getJSON(source, function(response) {
var forismaticResponse = JSON.stringify(response);
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>");
$("html").css("--main-bg-color", function(){
var color = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
if ( color == '#ffffff'){
return '#f1f1f1';
} else return color;
});
});
});
});