Tell us what’s happening:
anyways so i did this api method, some history on this:
- i got it working last night around early evening 8pm ish and the quotes were fading in and out nicely using .hide .show methods
- 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)
- 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?)
- 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