QuoteRandomMachine

index.html

<div class="jumbotron well">
<div class="container-fluid ">

    <div class="row ">
        <div class="col-md-6 col-md-offset-3">
            <blockquote class="div-quote"> </blockquote>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-md-offset-3" >
            <div>

                    <a href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-hashtags="quotes">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>




                <button class="btn btn-primary new-quote " id="button-quote">
                    New Quote
                </button>
            </div>
          </div>
        </div>
    </div>
    </div>
</div>
 <script>
    $(document).ready(function() {
      $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(a) {
      $(".div-quote").append(a[0].content + "<p>— " + a[0].title + "</p>")});
  
  
  
  });
  </script>
  <!-- new quote on click-->
  <script>
    $(document).ready(function() {

        $('.new-quote').on("click",function(){
            $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(a) {
                    $(".div-quote").fadeOut("slow",function(){
                    $(".div-quote").empty();
                    $(".div-quote").append(a[0].content + "<p>— " + a[0].title + "</p>")});
                    $(".div-quote").fadeIn("fast");
                    });
                   });
    });
  </script>

quoterandommachine.markdown

QuoteRandomMachine

A Pen by Antonio Sindico on CodePen.

License.

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.css

body{
  padding: 80px 50px 80px 50px;
  background-color: rgb(44, 62, 80);
  color: rgb(44, 62, 80);
}
#button-quote{
  float:right;
}

blockquote {
  background:transparent;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  border-style: none;

}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

blockquote p {
  display: inline;
}

.jumbotron{
  background: white;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />