November 17, 2020

011: How I Learned to Call My First API

17 minutes

I’ve just completed my first project where I call an API to randomly generate an inspiring quote, and this episode is all about how I did it.

One of the Free Code Camp projects that must be completed while learning JavaScript is to build a random quote generator by calling an external API, and including a button that lets people tweet the randomly generated quote. It was a great project and not as hard as I thought it would be!

Before getting started though, I spent a lot of time procrastinating. Part of that led me to the Dev Tips YouTube channel (and in particular this video), which was the inspiration behind my quote machine’s video background.

Here are the other resources mentioned in the episode:

Free video backgrounds from coverr.co

Google Fonts

Mashape is the API marketplace I mentioned

Forismatic created the API I ended up using

Working With APIs in JavaScript (video) from The Coding Train

Random Quote Machine (video) from Stephen Mayeux

My main takeaways / things to remember from this exercise were:

After you’ve written the code to call an API but before implementing its data to appear on your site, test that it’s being called correctly by opening the browser console to console.log any output from the API. This way you can make sure it’s working properly before integrating the API information into your site or app. (video explanation)

My quote machine was coded using jQuery to get a new quote each time the button was clicked. The button click also annoyingly caused the whole page to reload and jump to the top, but this could be avoided by adding an event listener to the function to prevent this default action from taking place. (video explanation)

And finally, you can see the final outcome of my random quote machine on CodePen.

This episode was originally published 26 Apr, 2017.

...more