<!-- 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();
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.