I've recently started learning javascript and I'm currently working on the Random Quote Machine project on freecodecamp. The main goal is to show a random quote along with its author when the user clicks the "New Quote" button. However, I'm facing an issue where every time the button is clicked, it displays the quote in gibberish and I'm unsure of how to correctly fetch the quote and author. Any guidance on the right approach would be highly appreciated!
https://codepen.io/leafbow/pen/RyjaeV
$(document).ready(function() {
$("#changeColor").on("click", function() {
getQuote();
});
});
function getQuote() {
var options = {
url: 'https://quotesondesign.com/wp-json/posts? filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=getQuote'
};
var request = $.ajax(options);
request.done(function(responseFromServer) {
console.log(responseFromServer);
document.getElementById("quote").innerHTML = responseFromServer;
});
request.fail(function(responseFromServer, status, error) {
console.log(responseFromServer);
console.log(status);
console.log(error);
});
}