RandomQuoteMachine

index.html

<div class="container">
  <div class="row">
    <div class="header text-center">
      <h1>Random Quote Machine</h1>
      <!-- header -->
    </div>
    <div class="intro col-sm-offset-1 col-sm-10 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
      <p>
        Who doesn't like random quotes? I do, and I'm sure you do too. They can brighten your day, give insight into life, or even serve as a wonderful reason to do a project!! Click the button below for random inspiration!
      </p>
      <!-- intro -->
    </div>
    <!-- row -->
  </div>
  <div class="row">
    <div class="col-xs-5 col-sm-offset-1 col-sm-3 col-md-offset-2 col-md-2 col-lg-1 col-lg-offset-3 generate-button-div">
      <button id="new-quote-button" class="generate-button btn btn-primary">Generate Quote</button>
      <!--.generate-button -->
    </div>
    <div class="col-xs-5 col-xs-offset-2 col-sm-offset-4 col-sm-3 col-md-offset-4 col-md-2 col-lg-1 col-lg-offset-4 generate-tweet-div">
     <button id='tweet-button' class="btn btn-primary pull-right"><i class="fa fa-twitter"></i>Tweet Quote</button>
      <a id='hidden-link' href="#"></a>
    </div>
    <!-- .row -->
  </div>
  <div class="row">
    <div class="col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8 col-lg-6 col-lg-offset-3 quote-div">
      <blockquote id="qod-quote" class='quote-box'>
         ... loading ...
      </blockquote>
    </div>
    <!-- .row -->
  </div>
  <!-- container -->
</div>

RandomQuoteMachine.markdown

RandomQuoteMachine

Generates a new random quote with each click of a button. Also allows a user to tweet a quote they particularly like.

A Pen by Sean on CodePen.

License.

script.js

$(document).ready(function() {
  $('#new-quote-button').on('click', function(e) {
    e.preventDefault();
    $.ajax({
      url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
      success: function(data) {
        $('.qod-text').html(data[0].content);
        $('.qod-author a').attr("href", data[0].link);
        $('.qod-author a').text(data[0].title);
        $('#tweet-button').attr('href', 'https://twitter.com/intent/tweet?text=' + $('.qod-text').text());
      },
      cache: false
    });
  });

  $('#tweet-button').on('click', function tweetQuote(e) {
    var twitterURL = 'https://twitter.com/intent/tweet';
    var text = $('.qod-text').text() + ' - ' + $('.qod-author a').text();
    if(text.length > 140) {
      text = text.substr(0, 137) + '...';
    }
    text = encodeURIComponent(text);
    window.open(twitterURL + '?text=' + text, '_blank');
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//quotesondesign.com/api/3.0/api-3.0.js"></script>

style.css

body {
  background: url("http://www.seanpalvarez.com/images/pink_rice.png");
}

.header h1 {
  font: 400 100px/1.0 'Just Another Hand', Helvetica, sans-serif;
  color: #990000;
  text-shadow: 0px 3px 0px #770000, 0px 5px 0px #4d4d4d, 0px 7px 0px #550000, 0px 9px 0px #330000, 3px 8px 15px rgba(0,0,0,0.1), 3px 8px 5px rgba(0,0,0,0.3);
}

.intro p {
  font-size: 1.3em;
  font-family: "Times New Roman";
  padding-bottom: 8%;
  text-align: left;
}

#hidden-link {
  visibility: hidden;
}

.quote-div {
  margin-top: 1%;
  min-height: 100px;
  border-width: 1px;
  border-style: solid;
  border-color: #000;
  border-radius: 25px;
  box-shadow: -10px 15px 10px #000;
}

.quote-text {
  width: 100%;
}

.quote-box {
  background: transparent;
  border: none;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Just+Another+Hand" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />