Blog post

Front-end Development: Build a Wikipedia Viewer

Third of four Project as part of the Front End Development Certification offered by freeCodeCamp (I talked about this certification here).

The main objective is to Build a CodePen.io app that is functionally similar to this.

The app is capable to show Wikipedia entries based on search which user insert on the form box. It also offers the posibility to show a random entry.

Visually talking it is a very simple app framed on a flex box system grid where you can click for a random article or insert your search inside the box of the form. The CSS code is developed with SCSS preprocessor.

You can find my app here

All the data management works with angularJs framework. The search cause a query to Wikipedia's API and collects the following data: Title, First paragraph, Url and Thumbnail Image (in case the articla should has no image, a default image is shown). All this data is generated on their respective rows below the initial content as followed:

When user click on "close" button all the articles rows disappear. The app also controls if the user is trying to search a blank string or if the search returns zero articles showing next message:

You can find my app here