So completely stuck -- Random Quote Generator using APIs

1

So I had done this challenge last year using a array and just pulling from it. But now that I’m coming back to coding and planning on pursuing it I feel like I really need to challenge myself and really create a good portfolio.

So I am working on the Random Quote generator and I am trying to use the Quotes on Design API. and I am completely stuck. I have no idea how to get it to work. I have ready the documentation from Quotes on Design, but still…

Project Link - http://codepen.io/Ngoldberg/pen/KWbJgp?editors=1010/

2

I haven’t gotten to the “Ransom Quote” generator yet, but I would suggest using letters cut out from magazines. :wink:

But seriously, when I run your code and look in the console, I see that that web site is timing out. I can’t even get the site to load up in my browser. I don’t know if it is down temporarily or if there are bigger issues. I might try a different site for now.

1 Like
3

This is using the forismatic api, it will send the json to the console so you can see what you’re getting.

$(document).ready(function() {
  $("#button").on('click', function(){
    $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?", function(json) {
      console.log(json);
      //$(".q").html(json.);
  });
  });
});

Happy hunting.

4

Looks like quotesondesign.com is down. You also have an error in the onclick event handler, it should be on(‘click’, and not on(click, (you forgot the quotes)

5

thanks I’ll add the quotes :slight_smile:

6

thanks that did help. I can see it now in the console.

But how did you know how to do that? I read the documentation from forismatic api and it didn’t really seem to say how to put that all together…

I feel like I’m missing a huge puzzle piece :frowning:

7

How did I knew to do that API string? The time honored tradition of “stealing it from someone else”.

Yes, API calls are confusing. And I too find the forismatic documentation a little confusing. I’m still figuring it out myself.

But checking the console is hugely important.

1 Like
8

LOL. OK thanks for the help :slight_smile:

9

Hey thank you so much!

I played around a bit more and i’ve finally gotten the api to work and to display the quote and author in the div’s i wanted them in, so thanks you were a tremendous help!

  • Nao
10

No problem. Just pay it forward. I guarantee if you hang out here long enough someone will come forward with the exact same problem.

1 Like
11

I’m also working on the quote machine right now.

Do you know if there is a way to get a specific genre of quotes? Say i wanted only sports from sports.

12

@ksjazzguitar

I tried your srcpt but got an error in the log

VM226 jquery.min.js:4 Mixed Content: The page at ‘https://codepen.io/BobbyB/pen/KgQAzz’ was loaded over HTTPS, but requested an insecure script ‘http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=jQuery311001347625180684342_1491556629414&_=1491556629415’. This request has been blocked; the content must be served over HTTPS.

do you know why this would be? Does the API support HTTPS?

13

try to load your codepen with http instead of https : http://codepen.io/BobbyB/pen/KgQAzz

14

hey Bobby, hows it going?

There are ways to get a quote from a specific genre, if the API you are making the call to allows it. Most of these APIs do provide the service (sometimes free, sometimes for a monthly fee), you will have to go through the documentation to find out. What API are you using to display the data?

Some APIs will send the response over HTTPS and other wont. I believe Codepen only allows API calls over HTTPS, the error you included is basically saying that, so I would assume this is true. There are some workarounds, but there are also APIs that serve over HTTPS, like Quotes on Design, if I’m not mistaken.

You can use Postman to send requests and see what kind of response you get, without the need to run the code and look at the response in a browser window. Hope this helps!

EDIT
Quotes on Design API might be over HTTP also, now that I think about it …

1 Like
15

BobbyB, i had some issues when i first tried to repair my script to match ksjazzguitar, if you include your codepen link I could take a look, if you wanted and you were still having issues?

  • Nao
1 Like
16

any help would be great. thanks

17

Do you know how i do this on codepen? I don’t find a way to change it to HTTP

18

just typing this http://codepen.io/BobbyB/pen/KgQAzz in your browser address bar or click the link above

19

BobbyB, I’m sorry I dont see what the problem is.

I went to your codepen and I see you getting quotes both on the page and in the console from the forismatic api…

  • Nao
20

http://codepen.io/BobbyB/pen/KgQAzz
click on edit on codepen button