CodePen and APIs: Don't overthink it!

1

A lot of projects (FCC Weather app, Random quote page, etc) require using an API to get information from other sites. Super easy concept, but CodePen is “special”, and most easy solutions you will come across don’t work. Here is a quick method to make it work (it’s not cheating), and good methodology in general to waste less time:

  1. Start with an empty project. Make sure to include JQuery in the CodePen JavaScript settings.

  2. Find an example JSON or AJAX call to the exact site whose API you want to use. It must be https.

  3. You need only 2 things: a JS function to make the JSON API request, and an html element like a <div> with an id to send the incoming JSON response to.

  4. Call the function on document.ready (or with a button if you prefer). Keep it simple & test until it works.

  5. Now you can move on to the rest of your project.

** Start with an empty project, so that nothing else can cause mysterious problems. You’ve been warned.

** JSON and AJAX both work, but https is mandatory. If it turns out that site’s API doesn’t use https, find another site that does. There are plenty so don’t waste time trying to force something.

** I was underwhelmed by CodePen’s own documentation regarding cross-origin API usage issues (as of July '17). Don’t bother.

** Read posts by skyc0der if you want deeper answers. (thanks skyc0der)

4 Likes
2

I’d add that if you can’t find a good JSON quote in HTTPS, copy the HTTP version you found and put it on your Github pages, then point your API call to that page. That’s a what I did.
You just create a .json text file and then refer to it in your AJAX call.

Ex: httpRequest.open("GET",'https://soupedenuit.github.io/json-quotes/Random-Quotes.json',true);
This was copied from http://quotes.stormconsultancy.co.uk/quotes

1 Like
4

That’s pretty great.

5

thats pretty cool. i like fetch, ive been having good luck with it lately in the react projects. do you know much about gists. i don’t but it seems like you can use those as endpoints for various things as well. post up if you use gists plz

6

No I haven’t used Gist, only gh-pages on Github. I use it for static pages (i.e. personal projects). It works great!