Dear fellows
During the quote project I have been trying to add the quote API but I wasn’t able to sort it out.
I would appreciate if anybody could assist me.
HTML code
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lobster" />
<div class = "well messagee">
<p id="mytext">The message will go here</p>
<button class="btn btn-primary" id="getMessage">
new quote
</button>
</div>
CSS code
.messagee
{
position: fixed;
bottom: 50%;
right: 50%;
width: 300px;
font-family:Lobster;
font-size:150%;
background-color:white;
}
.btn
{
position:relative;
}
javascript code
function randColor()
{
return "RGB("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
}
}
$(document).ready(function() {
var y =randColor();
$("body").css("background-color", y);
$("#mytext").css("color", y);
$("#getMessage").click(function() {
var x=randColor();
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback", function(json) {
$("#mytext").html(JSON.stringify(json));
$("body").animate({
backgroundColor: x
},1000);
$("#mytext").animate(
{
color:x
},1000);
});
});
I want to change the message will go here text to quote whenever the new quote button is clicked