Free Code Camp Intermediate Front End Development Projects

I’m going through Free Code Camps developer program and I just finished the Intermediate Front End Development Projects. I enjoy the teaching style of FCC compared to other online learning resources. It focuses more on you finding solutions and not just changing things from the examples to find an answer. Here are the four projects that I made for the Front End Development Projects.

Build a Random Quote Machine

See the Pen Random Quotes by Anthony Skelton (@ajskelton) on CodePen.

This was a fun project to get started using Ajax. After registering for the API key and getting configured I had my quotes coming in. I probably spent more time working on the design than the functionality and went through a couple different looks. I decided to go with the fade out fade in look, and got some practice chaining events by using the complete function of jQuery’s fadeOut to make sure the data didn’t change before the text had been removed.

Show the Local Weather

See the Pen Local Weather Application by Anthony Skelton (@ajskelton) on CodePen.

EDIT: This pen broke at some point, it’s on my list to fix.

My main struggle with this project was choosing what icons to display for the current weather. I looked at a bunch of options, and probably would have gone with svg icons from icomoon, but I hadn’t signed up for Codepen Pro yet so I didn’t have the ability to host any files. I could have previewed the icon font, but since that only worked for 24 hours I figured it was best to use something else.

I found a great pen from Josh Bader  with six animated weather icons in pure css. I used the codes returned from the weather api to determine which icon would be displayed.

Build a Wikipedia Viewer

See the Pen Custom Wikipedia Viewer by Anthony Skelton (@ajskelton) on CodePen.

The main problem I encountered with this project was in my Ajax call. I kept getting the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error. After a while of hitting my head on the wall I found I need to add more header information, and declaring dataType: “jsonp” did the trick.

For the design I used the Bourbon framework and added the search results as links from the Bourbon Refills Pattern Library. I liked the way I could include a thumbnail image as well as a variable chuck of text for the results.

Use the Twitch.tv JSON API

See the Pen TwitchTV Channel Status by Anthony Skelton (@ajskelton) on CodePen.

The tricky part of this pen was dealing with a nested Ajax call. The streams api returns limited information when a channel is offline. Not even the logo is available. In my success function I first check if the stream is online. If it’s not that’s when I do a second Ajax request using the same channel name but to the channel endpoint. This gives me the logo that I need to display. Since I’m separating the online from offline channels this gives me the opportunity to append them to different container divs.

Wrapping up the Front End Development Projects

I’m now over halfway through the Intermediate algorithms in the next section of Free Code Camp. I’m learning a lot of new techniques as well as good problem solving to get through some of the complicated questions. I’ll write up more about my progress as my time with the program continues.