Stuck on random quote machine

1

this is my codepen http://codepen.io/HowlCalcifer/pen/zZwVKB
my issue is actually getting the api loaded to the pen

2 
$(document).ready(function() {
 $("#getQuote").on("click",function(){
 $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?", function(json) {
var quote = json.quoteText; 
var author = json.quoteAuthor;
$(".quoteText").text("'" + quote + "'" );
$(".quoteAuthor").text("-"+ author +"-" );
});
});
});
3 
<div class="col-md-3">
    <div class="quoteText"></div>
    <div class="quoteAuthor"></div>
</div>

Change javascript as above and add html where you wanna quotes
to appear and its working as a charm.

4

Looking in the console, I saw some errors.

First it said that JQuery needs to be loaded before Bootstrap in the JS, so go to settings/javascript/add external javascript and make sure that JQuery is first (you can use quick load). Then I was getting a an error because tether wasn’t loaded so I manually loaded “https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js”. Then I added bootstrap. I guess it needs to be in that order. With that in place, I good the data with this code:

$(document).ready(function() {
  console.log("in doc ready");
  $("#getQuote").on("click",function getData(quote,author){
    console.log("in click");
    $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?", 
              function(json) {
      console.log("in getJSON ...");
      console.log(json);
      var quote = json.quoteText; 
      var author = json.quoteAuthor;
      console.log("quote = " + quote);
      console.log("author = " + author);
      // $(".quoteText").html("<p>"+ quote+"<p>" );
      // $(".quoteAuthor").html( "-"+ author +"-" );
    }); 
  }); 
});

You need to have the two JQuery lines at the end point somewhere, but the data shows up in the console, so it’s working.

5

Forked this, fix styles ::

6

Hi I am stuck at the same Challenge and I have used your feedback to check if mine has similar problems. I am having an Undefined issue and since I am new to Javascript I am confused as what is Undefined. I have all my var in place. I have checked on stack overflow and the suggestion of using window.load() was not clear. Any pointers will be most welcome.
here is my code pen link: https://codepen.io/Mauya/pen/EWMpVw

7

Usually undefined means that you have declared your variable but have not yet assigned it a value. Can you try using a default value before trying anything more difficult.

8

If you’re getting an error such as net::ERR_INSECURE_RESPONSE in the console and you’re using Chrome it is because of a recent update. I am not an expert in any way, but I just finished this challenge and the source api was my biggest problem. I too tried forismatic but got this error. I believe it is to do with the certificate on the api end and not something we can fix. I just kept googling quote api until I found one which worked with my version of chrome.

9

Thanks. I think that’s it I have not assigned it a value. Ooh my Thank you.

10

I was reading about exactly this yesterday :grin:

11

thanks everyone it is working for me now!

12

The quote generator is now working and the article was really helpful and am keeping it until I get my JavaScript straight. Thanks:slight_smile: