FreeCodeCamp Wikipedia Viewer Zipline Challenge

Posted by


The Wikipedia Viewer Zipline challenge is the 3rd challenge in the intermediate front end development projects for Free Code Camp’s Front End certification track. The objectives of this project were to build a Wikipedia Viewer similar to this Wikipedia Viewer Example, provide the user a link to view a random Wikipedia Article, and allow the user to search Wikipedia in a search box with the resulting Wikipedia entries returned back to them.  I have to say this project was a lot easier then the Local Weather App project.  The reason it was easier, is because the call to the API functionality was similar.  In both cases, the developer needs to write code that makes a call to the API and code that displays the data that is sent back from the API.  I was able to use my previous API call code for this challenge.  The things that make this challenge different from the Local Weather App are as follow:

  1. The user is able to search a term and the query results are returned.  I decide for the results that are returned back to the user, I wanted to incorporate some animation. The animation I used was the slideInUp and slideOutDown animation features that I learn about from animate.css. You can accomplish these effects using either HTML or jQuery.  I decided to use jQuery because I wanted the page to come in as the button was clicked and as soon as the results of the query was sent back.
  2. The other difference in this project was that we as the developer are required to add a button that when clicked takes the user to a random Wikipedia article.  This is a very simple task that can be achieved with just using HTML.  I used jQuery because I wanted to sharpen my jQuery skills.  The window.location object was used to redirect the Wikipedia URL to a new browser page. Here’s the code that achieves this:
$(document).ready(function() {
$('#randomArticleButton').click(function() {


In closing,  I’m very please with the end product of this zipline challenge.  I’m glad I challenge myself with some of the design details.  If you would like to see the finish product of this project click the following link: Free Code Camp Project: Wikipedia Viewer. If you have any questions or comments, please don’t hesitate to leave them for me.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s