Wikipedia Viewer Retrospective


The wikipedia viewer is my second project using a public API to get data and display it for the user. In this case, I used the Wikipedia search API. The user can type in a search term and gets the top ten results. The user can also fetch a random article by using the 'Random Article' button.

This was one of the first projects I made that I didn't use a background image and instead tried to pick a color palette. I discovered quickly that my design eye is lacking. I decided to use a Wes Anderson color palette from Life Aquatic, but it turned out terribly!

Wes Anderson color palette

Code Review

Looking at the HTML, it looks like I reverted to not using the responsive Bootstrap classes. Playing with the live app, it seems mobile responsive though. The simplicity of the UI must just lend itself to being mobile- friendly. Otherwise, the HTML is very simple and straightforward.

In the JavaScript, I am still leaning on jQuery to make the AJAX call, rather than using a standard xhr request. This was one of the first projects where I really grappled with how to append HTML elements using JavaScript based on the results of a API call. I also, for the first time, implemented an input field and learned how to grab hold of the value the user types in. And I taught myself how to avoid a personal pet peeve of my own, hitting the enter key should submit simple search forms like this and mine does!

Future Improvements

Since the Local Weather app is broken in Chrome, I believe I will rebuild this Wikipedia Viewer with Angular to learn how to test simple API calls and user input using Jasmine. Otherwise, there are a couple places that could being improved.

  • Remove Bootstrap and use flexbox since I am only using the grid
  • Remove jQuery and rewrite the API call with a basic xhr
  • Get that color palette under control!
  • I could also get rid of some loops in the JavaScript and use something like a forEach()