Can't get background color to change with Random Quote API

Can't get background color to change with Random Quote API
0

#1

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));
	} )
  });

#2

Hey,

You can’t animate the background colour with jQuery, it only really animates properties that have a numeric value. Check the docs for more info.

You can set the background with another method though, and then animate the opacity to get the effect you’re looking for!

Hope that helps

ps http://api.jquery.com/animate/


#3

Yes @gskll is right.You cannot do it with jQuery only. Alternatively you can add jQuery UI library and your code should work without any changes


#4

Thank you for your help. I review the documentation.


#5

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.