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:
Find an example JSON or AJAX call to the exact site whose API you want to use. It must be https.
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.
Call the function on document.ready (or with a button if you prefer). Keep it simple & test until it works.
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)