Random Quote Generator API usage

JavaScript
1

I really need some help, guys. So, I put together my basic HTML, got some CSS done but I cannot figure out how to apply the API to the project. I am using “Quotes on Design”'s API and I keep going over the JSON, API’s and Ajax section on FCC and it talks about how to use it, and maybe I’m missing it, but it is not working for this project. I don’t need pictures migrated in, I just want my button to spit out a quote.

Im really confused and maybe I’m just overlooking the details? What did you guys do?

2

Can you post your current code in Codepen or https://fiddle.jshell.net and provide a link to it?

3

Yep, sure thing:

It isn’t the best, but, I tired. lol.

4

You have errors showing in the console (Ctrl+Shft+I in Chrome) you need to fix.

You have 3 main issues:

#1) First, you are using JQuery in your JavaScript section, but you have not linked to the external library ( see https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js ) like you did with the Font Awesome library.

#2) Move the following:

<script>
   $("#getMessage").on("click", function() { $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
  $("body").append(a[0].content + "<p>— " + a[0].title + "</p>")
});
</script>

to the bottom of your JavaScript section on Codepen. Also get rid of the <script> and </script> tags when you do put it in the JS section. Also, you are missing a closing }); at the end of this code.

#3) You are trying to call the API with http:. Since Codepen is served over https: you must make the call via https: or the browser will complain and not allow you to get the data back from the API.

2 Likes
5

Got it, thank you so much. I will apply those three things when I am done with dinner.

6

I assume you know you can get rid of the whole

 $('#get-another-quote-button').on('click', function(e) {

Also, I assume you are aware that after fixing the problems I mentioned, you are appending the quotes, so you see the entire history of quotes and not just a single quote.

7

Oh, no. I didn’t know that. So, maybe I should shoot for another API? That is not the one I need?

8

The code in the

$("#getMessage").on("click", function() {

works fine (using the QuotesByDesign API) once you fix the problems I mentioned. Your html did not even have an element with id=“get-another-quote-button” so that is why I said you could get rid of it.

9

Okay, got ya. I’ll catch it after dinner and I will let you know how it goes.

10