So i watched Stephen Mayeux’s online video on creating a random quote api. I used it for my own. It was very useful. However, I looked at freecodecamp’s example in codepen and wanted to replicate the background color changing when you click the quote button. I thought I knew enough to make it work even though Stephen doesn’t cover it in his video. However, mine is now working. Some help is appreciated. Thanks:
below is my jQuery code:
var quote;
var colors = ['#16a085', '#27ae60', '#2c3e50', '#f39c12', '#e74c3c',
'#9b59b6', '#FB6964', '#342224', "#472E32", "#BDBB99", "#77B1A9",
"#73A857"];
function getNewQuote() {
$.ajax({
url: 'http://api.forismatic.com/api/1.0/',
jsonp: 'jsonp',
dataType: 'jsonp',
data: {
method: 'getQuote',
lang: 'en',
format: 'jsonp'
},
success: function(response){
quote = response.quoteText;
author = response.quoteAuthor;
$('#quote-text').text(quote);
if(author){
$('#quote-author').text('-- ' + author);
} else {
$('#quote-author').text('-- unknown');
}
var color = Math.floor(Math.random() * colors.length);
$('body').animate({
backgroundColor: colors[color],
}, 1000);
}
});
}
$(document).ready(function() {
getNewQuote();
$('#quote-button').on('click', function(event) {
event.preventDefault();
getNewQuote();
});
$('#twitter-button').on('click', function(event){
event.preventDefault();
window.open('https://www.twitter.com/intent/tweet?text=' + encodeURIComponent(quote + '-- ' + author));
} )
});