Day 38 – Day 57 Finished FCC’s Quote Machine Challenge

Screenshot 2017-06-11 at 6.47.52 PM

Almost 3 weeks has gone by since my last post. But I’ve learned a lot in the past three weeks — I’ve been working on the first intermediate front end dev challenge — build a quote machine. And I finally finished it today!

Looking back, here are the processes and steps that helped me tackle this challenge effectively. I’ll have to say FCC didn’t explain the concept of API that well, as most of the codes were given to you to complete the sandbox tutorials. Therefore, when I first started the challenge, learning what API was all about, and how to use JQUERY to get JSON/JSONP data proved to be a steep learning curve. But looking back, below are the major hurdles I needed to overcome to complete this challenge, and here’s how I did it —

  1. Understand JQUERY’s getJSON method. Below are the two links that I found useful, and I recommend reading through these documentations carefully to get a grasp of the key conceps.
  2. Understand  the cross-origin issue – JSON vs JSONP
    • You will soon find out that even if you’ve used the correct methods, and found an API (I used the forismatic API for the quotes), the quotes won’t show correctly on Codepen. As a lot of people say, this was the biggest time suck during the project, and a lot of the stackoverflow answers weren’t straightforward enough. In the end I found a workaround through one Codepen example. And here’s the correct code for the Forismatic API to work on Codepen: url = “”
    • I also found this youtube video, which was highly engaging btw, that touched upon the difference between JSON and JSONP — highly recommend.
  3. Add the tweet function. I googled this on youtube, and at first there were lots of complex examples which again turned out to be too confusing. I also googled Twitter’s developer page, but then there was too much to red … Finally, one youtube video had the most simple solution: $(‘#tweetButton’).on(‘click’, function(){“,freecodecamp&text=”+encodeURIComponent(newQuote));
  4. Make the API data a global parameter. This is related to making the quotes work with the tweet button. I was able to understand the concept, and the solution better thanks to the Code360 tutorial.


That’s it. It’s amazing to see how many web resources helped me during the project. And I felt one of the abilities coding really helped me hone, is the ability to problem solve through identifying the correct resources online — efficiently.

Again you can see my finished codepen project here. Just to learn things from another angle, I also completed another draft project using the array method, which you can find here. Although the first API challenge took more time than I originally budgeted. I’m glad I took the time to really understand the fundamentals, and am hoping that the foundation will help me tackle the other challenges more efficiently.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s