Day 80 – 93 Finished the last FCC Intermediate Front End Project! – twitch TV App

Yesterday I finished the last intermediate front end project – the TwitchTV API App!

Screenshot 2017-07-19 at 7.06.12 AM

The main things I learned, or hurdles I faced from this project are —

  • Getting logo and status of the Twitch TV accounts regardless of if they are online or offline. If an account is offline, the default API url suggested by FCC won’t work. I found another URL to get general information for accounts that are offline.
  • Learning the JQuery apend/prepend/after methods. The main task is, after using the getJSON method to get the account status, upon “document ready”, add these elements to the html — I used the JQUERY after method for this.
  • Learning how to use the “for loop” together with getJSON. This has taken me lots of time – because of the asynchronous nature of getJSON, initially my username and status will show up randomly, or repetitively in my html. I learned to use for each i, function(i), to make sure that each i functions “locally” within the getJSON for loop.
    • check out this stackoverflow post – after millions of searches, this one saved my life!  https://stackoverflow.com/questions/15347750/getjson-and-for-loop-issue
  • Learned how to turn status, and logo into “variables”, to use the same URL structure in the for loop. This is the first time I’ve used used “variables” to streamline my JS functions – very efficient!

After these four intermediate projects, I feel much more competent and confident in the JQuery methods, and working with APIs! Now onto my intermediate scripting challenges!

 

 

Day 73-79 Finished FCC Wiki Page

In a week, I finished the last but one FCC intermediate front end project – build a wiki page.

Screenshot 2017-07-04 at 8.48.40 PM

The wiki page allows a user to search for any wiki entries on a web page, or click to access a random wiki page.

Because I was already pretty familiar with APIs, I was able to finish the project in a fairly short amount of time.

Looking back, the key steps/overcomes were —

  1. Searching how to embed a user input form using HTML.
  2. Reading about the Wiki API, and especially the “Open Search” action. (I was stuck for a while because the API documentation page contained a lot of information. But thanks to CodeTutorial 360, I was able to locate the exact page for this task. I made sure to only watch the video where the useful API section was pinpointed, without looking any further to reference any more specific steps).

The other steps were similar to the previous projects, mainly using JQuery to get json data, and to embed functions when clicking on the html buttons.

You can view the codepen site here.

Now I can’t wait to finish the last intermediate front end project, before moving on the advanced sections!

Btw, a productivity tip I learned was, pay attention to the environment in which you were working. Sometimes the noises in the background, the heat, and so on affect our productivity more than we realize. For me, I’ve developed a habit in the past week to go to a tranquil park before work each day, where I could have absolute undisturbed time to focus on coding. I’ve learned that I was able to think through the problems much more efficiently. The chirping birds, the morning sunshine, the cooling breeze, all helped me stay focused on my task more than the office, or starbucks.

 

IMG_0803