Random Quote Machine -- FCC Zipline

index.html

<div class="container">
  <div class="jumbotron">
    <h1 class="display-3">Random Quotes!</h1>
    <div class="card card-inverse card-info text-xs-center">
      <div class="card-block">
        <blockquote class="blockquote blockquote-reverse">
          <p class="m-b-0">Loading...</p>
          <footer class="blockquote-footer"><cite title="Source Title"></cite></footer>
        </blockquote>
      </div>
    </div>
    <hr class="m-y-2">
    <a class="btn btn-primary btn-lg" role="button">More</a>
    <a class="btn btn-info btn-lg" rol"button">Tweet</a>
  </div>
</div>

random-quote-machine-fcc-zipline.markdown

Random Quote Machine -- FCC Zipline

A Pen by Sk. Imtiaz Ahmed on CodePen.

License.

script.babel

$(document).ready(function() {
  var quoteNode = $('p');
  var authorNode = $('cite');
  var buttons = $('a');
  quoteGen(quoteNode, authorNode);
  buttons.first().click(function() {
    history.go(0);
  })
  buttons.last().click(function() {
    if (quoteNode.text().length > 140) {
      var limit = quoteNode.text().slice(0, 136) + "...";
    }
    var tweet = limit || quoteNode.text();

    window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent(tweet));

  })
});

var quoteGen = function(quote, author) {
  var url = "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback="

  $.getJSON(url, function(data) {
    quote.html(data[0].content);
    author.text(data[0].title);
  });
}

scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>

style.css

.blockquote{
  border-right: 0;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />