Quote generator/JSON api

Hiya

I was unable to get my own code to work so I started looking at other users’ pens on the forum and none of them work either, even though others have commented that it does. The only one that does is FCC’s example pen. It almost seems like a browser problem? I tried disabling some Chrome extensions like HTTPS everywhere, Ghostery, and UBlock Origin but it made no difference

Someone made a pretty cool and simple API which sends data over HTTPS

Here’s the api link
https://random-quote-generator.herokuapp.com/api/quotes/random

5 Likes

Thank you! This link was a lifesaver!
I was stuck! I was not able to make the page work in codepen, because of the other API’s http request. It otherwise worked fine locally in my browser, outside codepen.

It would be cool though if we could learn how to fix it without needing to change APIs… any tips on best way to solve the http/https mixed content problem (https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content) other than ask the API owner to change it? :slight_smile:

I had this problem just yesterday, so I made a post too

and I’ve found a better API after doing a bit of research.

so does this mean everyone else is using internet explorer or something :joy:

I used chrome and firefox, so, maybe…

The other APIs are normally sending data over a HTTP (insecure) protocol.In our case, Codepen and github pages are both working on a secure protocol (HTTPS) so when you are using a secure protocol you should send and receive data via secure protocol only. I think this was made to ensure security

So, the APIs I found (forismatic etc) are using HTTP protocol, so it’s hard to send data over such network, and I think the hard way to get around this is to use a proxy or some other CORS like thing idk I’m new to this too!

I think most services would prefer to have a secure pipeline to the data if you’re building an app, so you can’t really fault them for blocking mix content. I think changing APIs is the fix.

I think other people used different APIs, depend on when you did the projects.I know I decided to not use a quote specific API, and instead just pull quotes from Wikiquotes. It took a lot more work to figure out how to leverage the mediaWiki API to do what I wanted, which is just to pull random quotes from people, but I think I also learned a lot more, I know it helped me immensely on the wikipedia viewer project just because I’ve already know how that API works

Yeah I just wanted to get the stupid thing working for now, but maybe when I’m not so frustrated later I’ll have a crack at doing it with a different method. It’s more fun that way :slight_smile:

That is a cool idea!

I can see their API also uses http (https://www.mediawiki.org/wiki/API:Main_page), so I’m curious to see how it can be done. i think I’ll try as well, thanks!

it won’t be as nice and tidy as simply requesting for a random quote, because of different categories, formatting, and the fact that you have to parse the content. I know I spent most of my time just figuring the stuff out rather than the page itself.

this also helped a lot

1 Like

If you just want to get the app running, hard code your own JSON object of like 5 quotes from 5 different people and just work with that while you build the page. Get all the buttons and effects working because those processes work the same doesn’t matter where your data comes from.

I know that’s how some people finished that project, the user story didn’t force you to use an API, or say it can be the same random 5 quotes. Once you get the interface working nicely with your own data, then you know at least the frontend of your app works, then you can work on how to get data from other sources to play nicely with your app

1 Like

This was super helpful and simple.

Briiliant ! how did you get this ?!

Google around! yay! :smiley:

1 Like

I did but it didn’t work at all. But, finally, I copied it and worked :sweat_smile:

1 Like

lol =3 xD ahhh character limits ffs

1 Like

I need help! What’s wrong with this code: