I recently completed the third intermediate project from freeCodeCamp’s Front End Development Certification. The goal of the project was to create a Wikipedia Viewer.
In keeping with tradition, I am going to discuss what went into completing the project, what I was hoping to accomplish, and what challenges I faced along the way.
You can find similar articles about other projects I have worked on here.
Wikipedia Viewer Requirements
The goal of this project was to build a CodePen app to allow the user to use a search box to search Wikipedia entries. The user should also be able to click a button and see a random Wikipedia entry.
You can learn more about the project in this video:
The video mentions a Bonus User Story for adding autocomplete to the search bar. That part is no longer listed in the assignment details but I included it on my list of intended functionality.
After seeing the project details, I thought it was going to be fairly easy, at least from a design perspective.
Turns out I underestimated the amount of work that goes into even a simple design.
My original vision was to have the Wikipedia logo at the top of the page with a search bar and random article button centered underneath.
I wanted a clean look so I was thinking about either a subtle gradient for a background or maybe a simple image of some sort. When I started looking at options I was thrilled to find the puzzle piece background that I ended up using.
It was the perfect tie in to the Wikipedia logo and it filled out the large amount of unused space on the page nicely.
As far as colors, I went with a color palette that was inspired by something I found at Color Hunt.
I used Flexbox to design the layout and I used the mobile first principles that I discussed in the article on my Local Weather app.
While it did take me a little longer than I originally anticipated to do the design, it came together without any unexpected challenges.
Much of the core functionality in the Wikipedia Viewer is similar to what we have done in other intermediate projects.
The main difference is that the call to action for this project stems from user input in the form of the search bar.
We aren’t just calling on a static API and interpreting the data that is returned. We have to take the user input and build it into a query string that calls on the Wikipedia API for data specific to the search term.
To me, this is the most difficult part of this project.
This video from CodingTutorials360 does a great job of explaining that process:
In fact, that Wikipedia playlist contains several other helpful videos so it is worth watching the whole series.
One thing to note: In the videos, he recommends using an AJAX call to get and process the data. I prefer to use jQuery for this, just like we did in our Local Weather app.
Here is a look at the code, which you can click on to enlarge:
I like this method better for two reasons. First, I think it is cleaner. Second, it is a method that we are already familiar with from other projects.
Either way works. In fact, the jQuery method is just a shortcut for the AJAX request. I am just more comfortable with jQuery so I went that route. Feel free to use whichever makes more sense to you.
Once we have the data, we run it through a For Loop to isolate the parts we want to display and append them to a div element.
This reminds me of another change from the above videos.
In the videos, he uses .prepend to display the data. This actually lists the data in reverse order so the most relevant search results are shown last. Using .append shows the results with the most relevant listings first.
This is just a minor oversite on the part of the content creator but I would hate to see someone blindly follow the videos and not realize the error.
For the most part, I was happy with how well the Wikipedia Viewer came together.
The one problem I had, was in trying to add an autocomplete feature to the search bar. I thought I had a solution figured out but I couldn’t get it to work on CodePen.
The weird thing was when I tried using Treehouse’s Workspaces tool using the exact same code, it worked. At least to an extent.
It was displaying the results in the top right corner of the screen instead of underneath the search bar.
After a bit of unsuccessful tinkering, I decided to go ahead and turn in the project without the autocomplete feature.
A big reason for that decision was that even if I was able to get the results to display properly on Workspaces I still had no idea why it wasn’t working on CodePen (I assume it is a library issue).
The only other issue was something I discovered after the fact when viewing the project on a mobile device.
For some reason, the magnifying glass icon is slightly off center to the right. This only happens on mobile.
On PC you can resize the browser to any size and the search icon and the rest of the layout always center perfectly.
I’m not sure what would cause the icon to appear one way on mobile and another on PC but that is a question for another day.
I am going to add those two issues to my list of future bug fixes and move on to my next, and final, intermediate project.
Where to Find it
As always, any feedback is appreciated and I would love to see your take on the Wikipedia Viewer project.