oxJgXw

index.html

<div class="container narrow-container";>
  <div class="row quotes-window">
    <div class="row">
      <div class="col-lg-1"></div>
      <div class="col-lg-10 quote-content">
        Quotes dude
      </div>
    </div>
    <div class="row">
      <div class="col-lg-9"></div>
      <div class="col-lg-3 quote-author">
        Author dude
      </div>
    </div><br><br>
    <div class="row buttons-row">
      <div class="col-lg-1"></div>
      <div class="col-lg-2">
        <a href="#" id="twitterWrapper"><button id="twitterBtn" class="btn socialButtons"><i class="icon-twitter"></i></button></a>
      </div>
      <div class="col-lg-6"></div>
      <div class="col-lg-2">
        <button id="newQuoteBtn" class="btn btn-default">New Quotes</button>
       </div>

    </div>
  </div>
  
</div>

oxJgXw.markdown

oxJgXw

A Pen by Alex Glover on CodePen.

License.

script.js

$(document).ready(function() {
  $("#newQuoteBtn").on("click",  renderQuote); // End of on click event

  renderQuote();
  
  function renderQuote(){
    $.ajax( {
      url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
      success: function(data) {
        var post = data.shift(); // The data is an array of posts. Grab the first one.
        $('.quote-author').text(post.title);
        $('.quote-content').html(post.content);
        $('#twitterWrapper').attr("href", "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=" + encodeURIComponent(post.content) + "%20" + encodeURIComponent(post.title));

      },
      cache: false
    });
    var newColor = '#' + Math.floor(Math.random()*16777215).toString(16);
    $("body").css("background-color", newColor);
    $("#newQuoteBtn").css("background-color", newColor);
    $(".socialButtons").css("background-color", newColor);
  }
  
});// End of document ready

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

style.css

body {
  background-color:whitesmoke;
}

.narrow-container {
  width:50%;
  margin: 200px auto;
}

.quotes-window {
  background-color: white;
  padding: 20px;
}

.quote-content {
  font-size: 36px;
}

.quote-author {
  font-style: italic;
  font-size: 18px;
}

#newQuoteBtn {
  color: white;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />