Quote Machine- how to implement the fades

Tell us what’s happening:
anyways so i did this api method, some history on this:

  1. i got it working last night around early evening 8pm ish and the quotes were fading in and out nicely using .hide .show methods
  2. I uploaded the project tester and even though it was working fine its not passing the majority of the tests which are all mostly html structure checks anyways. (I dont understand why its so important)
  3. I start to deconstruct the html and pass all the tests, I had a filler static html as quote for the twitter link just for testing purposes, anyways i noticed that it was still passing that related test… (i forgot which one it is but that bug #1 it shouldnt be passing that test becuase im sure you want a dynamic link based on what the api delivers in the json yeah?)
  4. anyways around 1am after reconstructing to pass all the html checks i get it all working but its still not passing that same test i just mentioned, maybe because i had since changed the static string to an empty “” placeholder, but 11 of the 12 tests are passing, Im satisfied , and crash…

I go back to check it this afternoon and now im not even getting my quotes to show.As far as I recall the state of the app before I passed out was 11 checks passing and fully functional, just couldnt get the fades to work. Now nothing is working. I dont remember messing around with it:

//ajax_1.html
type or paste code here
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Quotes</title>
<!–– insert styles ––>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<style>
	#quote-box{
	 text-align: center;
	}
	</style>
</head>
<body>

<div id="quote-box">
<button id='new-quote'>get Quote</button>
<a id="tweet-quote" target="_blank" href=""><i class="fa fa-twitter" aria-hidden="true"></i></a>


<span id="text"></span>
<span id="author"></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="ajax_1_main.js"></script>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

</body>
</html>
type or paste code here
//ajax_1_main.js
$(document).ready(function(){
$('#new-quote').on('click',function(){
			$.ajaxSetup({cache:false});
			
			  $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
  $('#text').html(a[0].content);
  $('#author').html("<p>— " + a[0].title + "</p>");

});
 
});

$("#tweet-quote").click(function(){
	
     var textToTweet=$("#text").text()+ ' -' + $("#author").text();
    
      var tweetLink = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(textToTweet)+'%0D%0A'+' - a KravMaguy creation';
 window.open(tweetLink,'_blank');});

});

//  methods below were working before I had to reconstruct in order 
// to pass the fcc checks. Not currently working and now No quotes???
//  $('#text').hide().html(a[0].content + "<p>— " + a[0].title + "</p>").fadeIn();



Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine

Do you have a working demo on a codepen we can take a look at?

1 Like

wait now its working. my bad…
where do I need to post it to get graded on it?
and can you please tell me how to implement this method below, and for extra credit how I can implement fades at different speeds so the top qoute fades in first and the author fades in second shortly following. each one is now outputting to a seperate div as per the exercise requirements so I should be able to implement this.

$('#text').hide().html(a[0].content + "<p>— " + a[0].title + "</p>").fadeIn();

Its working on my localhost. not working on codepen…

recheck the link I saw the error in the console and fixed it. its working now thank you,

But how can I implement the fades?