Wikipedia Viewer

Demo

Source Code

This project is part of the progression on FreeCodeCamp.

Building this website helped me become more comfortable with jQuery.

The use of jQuery in this website is fairly straightforward. Most of the heavy lifting is done by the search function which is called when the enter key is pressed (via keycode=13).

$('#search').keyup(function (e) {
   if (e.which === 13) {
     search();
   } ...

At this point we make an ajax call to the Wikipedia API and append whatever was typed in the search bar. The data we receive back is in the JSON format and we store that in an array.

Finally we loop through the results array and append well elements for each result we have received via jQuery.

for (var result in received) {
  results.push(new Result(received[result].title, received[result].snippet));
  html = '<div id="articles" class="well"><a href="https://en.wikipedia.org/wiki/' +
  received[result].title + '"target="_blank"><h3>' + received[result].title +
  '</h3><p>' + received[result].snippet + '</p></a></div>';
  $('.results').append(html);
}

The source code itself is fairly small. Check it out in the link above.

Everytime you build a new website your skills in HTML, CSS, and JS improve. This project also gave me an opportunity to explor jQuery and APIs a little more.