<!-- 
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;
      });
      
    });
  
  });
 
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js