011 - How I Learned to Call My First API
26 Apr, 2017
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.
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
- 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.