Wikipedia Viewer

A web-app that accesses Wikipedia and returns article summaries and links in response to a search.

I built this app for freeCodeCamp third Intermediate Front End Development Project.

I had lots of fun discovering how JS can manipulate the HTML on this one. It’ll be good to keep dabbling with this in coming projects and I have no doubt I’ll quickly discover how to code the HTML simply and cleanly in order to manipulate it from the JS side for faster and lighter code that can do much more. Oddly enough, the hardest part of this project for me ended up being getting the bootstrap button to behave as a toolbar (it took me waaaaay too long to track down the issue to my DIVs not being quite right). In the end, this one took me 16 hours from start to finish.

User Stories

The brief for the Build a Wikipedia Viewer project was as follows:

  1. Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/wGqEga/.
  2. Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.
  3. User Story: I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.
  4. User Story: I can click a button to see a random Wikipedia entry.
  5. Hint #1: Here’s a URL you can use to get a random Wikipedia article: https://en.wikipedia.org/wiki/Special:Random.
  6. Hint #2: Here’s an entry on using Wikipedia’s API: https://www.mediawiki.org/wiki/API:Main_page.
  7. Hint #3: Use this link to experiment with Wikipedia’s API.
  8. Remember to use Read-Search-Ask if you get stuck.
  9. When you are finished, click the “I’ve completed this challenge” button and include a link to your CodePen.
  10. You can get feedback on your project by sharing it with your friends on Facebook.