<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.css" />

<!-- Compiled and minified JavaScript -->


<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

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


<body class="teal lighten-2">
  <div class="progress" id="loader">
              <div class="indeterminate"></div>
            </div>
  <div class="container">


    <div class="section">
      <h3 class="white-text">Random Quote</h3>

      <div class="col s8 m4">
        <div class="card lighten-1 black-text">
          <div class="card-content">

            <span class="card-title" id="author"></span>
            <p id="quote"></p>
            
          </div>
          <div class="card-action">

            <button class="btn waves-effect waves-light" type="submit" name="action" id="newQuote" right><i class="material-icons right">shuffle</i>New Quote</i>

  </button>
          
          <a id="share" class="btn waves-effect waves-light" target="_blank"
  href="https://twitter.com/intent/tweet?text=Hello%20world">
<i class="material-icons right">share</i>Tweet</a>
          
          <button class="btn waves-effect waves-light" type="submit" name="action" id="copy" right><i class="material-icons right">content_copy</i>Copy </i>

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

    </div>
    <div class="divider"></div>
  </div>


</body>
$(document).ready(function() {
  $("#loader").css("display", "block");
  var isoString = new Date().toISOString();
  $.getJSON(
    "https://quotesondesign.com/wp-json/wp/v2/posts?filter[orderby]=rand=&" +
      isoString,
    function(response) {
      $("#loader").css("display", "none");
      $("#quote").html(response[0].content.rendered);
      $("#author").html(response[0].title);
      $("#share").attr(
        "href",
        "https://twitter.com/intent/tweet?text=" +
          response[0].content.rendered.replace("<p>", "").replace("</p>", "") +
          "- " +
          response[0].title
      );
    }
  );

  $("#newQuote").click(function() {
    
    var colors = ['purple darken-4', 'teal lighten-2', 'brown lighten-1', 'blue-grey', 'deep-orange lighten-3', 'light-green accent-1', 'light-blue accent-1', 'pink lighten-3', 'ink darken-1', 'green accent-4', 'amber accent-1'];
    
    var randomNumber = Math.floor(Math.random() * 11);
    
    $('body').removeClass(function() {
  return $( 'body' ).attr( "class" );
}).addClass(colors[randomNumber]);
    
    $("#loader").css("display", "block");
    var isoString = new Date().toISOString();
    $.getJSON(
      "https://quotesondesign.com/wp-json/wp/v2/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=&" +
        isoString,
      function(response) {
        clipboardData = response[0].content;
        $("#loader").css("display", "none");
        $("#quote").html(response[0].content.rendered);
        $("#author").html(response[0].title);
        $("#share").attr(
          "href",
          "https://twitter.com/intent/tweet?text=" +
            response[0].content.rendered.replace("<p>", "").replace("</p>", "") +
            "- " +
            response[0].title
        );
      }
    );
  });

  $("#copy").click(function() {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($("#quote>p").text() + " - " + $("#author").text()).select();
    document.execCommand("copy");
    $temp.remove();
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.