FCC Speed Run Challenge: Wikipedia Viewer

This is my third finished project for the FCC Speed Run Challenge. I’m not really keeping up with the serious people going through it, but I’m happy with my progress so far.

Keeping with the theme that’s emerging, this project was again easier than than the previous two. There were a couple new challenges here that made it tricky, but my experience with the other two intermediate front-end projects helped a lot.

Part 1: HTML/CSS

This was fairly simple, though it did take me kind of a long time to get the styling of my search bar and buttons to look the way I wanted them to. I went very simple here, with just the search bar and buttons under the header of the page. I also learned how to get the footer to stick to the bottom using the display property “flex”, so that was a big win.

Part 2: JavaScript and the Wikipedia API

In my past two projects, I used jQuery to help with the JavaScript stuff. This time, I decided that I wanted to make sure I could accomplish the same stuff without the use of jQuery, so I went with plain old JavaScript for everything. I found that using jQuery definitely makes things a little less verbose, particularly for actually getting JSON data from the API.

The other thing that was tricky was learning how to use the Wikipedia API. The documentation was pretty thorough, but it was presented a little differently than the other APIs I’ve been using. I made liberal use of the sandbox they provide, as well as just copy/pasting URLs into the browser to see what they did. I struggled a bit with the “No-Access-Control-Allow” thing, until I learned that setting “origin=*” in the URL took care of it. That was lucky, because I was struggling mightily with the concept of headers before I found “origin=*”.

After that, it was just a matter of styling the list output that I got from Wikipedia. In terms of actual time spent working on it, this project was definitely the quickest.

Notes:

• The project is live here
• The source code for the project is here

Notes for myself:

• I’ll need to learn more about Cross-Origin Resource Sharing for when it pops up in the future
• I want to investigate flex CSS properties more thoroughly and start incorporating them into my projects

Up next is the Twitch.tv project!