Photo (c) Joao Silas

FreeCodeCamp: Wikipedia Viewer

This is the third of the four intermediate front end development projects in Free Code Camp.

And the challenge is to build an app that fulfills the user stories below:

  1. I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.
  2. I can click a button to see a random Wikipedia entry.

Click this to see an example.

There are also two helpful hints given:

  1. Click this URL to get a random Wikipedia article: https://en.wikipedia.org/wiki/Special:Random
  2. Read this article about using Wikipedia’s API: https://www.mediawiki.org/wiki/API:Main_page

Markup

For this project, we need a form with an input for text field and an input for submit. But this time, I’m going to use a search icon as our button to submit.

We also need a button to click to get a random Wikipedia entry.


<div>
<div class="container">
<h1 class="text-center">Wikipedia</h1>
<form action="">
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<label class="sr-only" for="article">Search an article</label>
<div class="input-group">
<input type="text" class="form-control" id="article" placeholder="Search an article">
<div class="input-group-addon button"><i class="fa fa-search" aria-hidden="true"></i><i class="fa fa-times" aria-hidden="true"></i></div>
</div>
</div>
</div>
<div class="col-sm-4">
<a target="_blank" class="btn btn-info" href="https://en.wikipedia.org/wiki/Special:Random">Get a Random Article</a>
</div>
</div>
</form>

<div class="results">
<h2 class="text-center">Results</h2>


</div>
</div>
</div>

In this markup, I used Bootstrap. So if you’re wondering what classes I’m using, most of them are Bootstrap classes. Those are classes that Bootstrap set to design those elements.

And one class, sr-only, shows only this element on screen readers and other assistive devices.

You can also notice that I have two i elements. Those are font icons that I’m going to toggle showing. So it’s either only one of them will appear.

CSS

Most of the design are accomplished by Bootstrap. If you want certain designs, you can check their website.


body {
padding-top: 70px;
background-color: #000;
color: #fff;
}

form {
padding-top: 20px;
}

.randomEntry {
text-align: center;
}

.results,
.fa-times {
display:none;
}

p {
font-size: 16px;
}

.results div {
background-color: #31b0d5;
padding: 10px;
border-radius: 6px;
}

.results h3 {
margin: 0;
font-size: 23px;
}

a,
a:visited {
color: #fff;
}

These are the basic styles I declared just to give it a minimal look.

You can also notice that I hid the icon for the class, fa-times. Then, I’m going to use jQuery to toggle them.

JavaScript

I used jQuery to help me with this project’s goals.

A user click on the text field, enter something then click on the search icon.

Once she clicks on the search icon, the search icon will be hidden and the close icon will be visible. We’re going to store the user’s input into a variable and pass it in our function, searchArticle().

$(".button").click(function() {
$(".fa").toggle();
var article = $("#article").val();
searchArticle(encodeURI(article));
});

The global function, encodeURI(), encodes special characters like a white space.

So why am I doing this?

Because we’re going to use the user’s input to make a URL.


function searchArticle(value) {
var api = "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=";
api += value;
api += "&format=json&utf8=&callback=?&prop=links";
$.getJSON(api, function(data) {

var results = [];
for (var i = 0; i < data.query.search.length; i++ ) {
results.push(data.query.search[i]);
}

var arrayOfResults = [];

for (var i = 0; i < results.length; i++) {
var title = data.query.search[i].title;
var snippet = data.query.search[i].snippet;
var output = new Result(title, snippet);
arrayOfResults.push(output);
}

displayResults(arrayOfResults);

});
}

In this searchArticle() function, we’re going to form the URL to get data from MediaWiki API. Then, we’ll pass this URL to the getJSON method.

You can get the URL formed by displaying it in the console.

You can also add “fm” to the format=json so it’ll be format=jsonfm.  Adding this will make the results readable.

But I’m just telling this so you can visualize what is happening.

If you have checked the URL in your browser, the search property of the query property has the title and whereabouts of the user input.

And that’s what I’m going to use to display the results. I’ll push them into an array to separate what we really need.

While looping into this array, we’ll only get the title and snippet attributes and then make an object. And this object will be stored into another array, arrayOfResults.

 
function displayResults(listOfResults) {
 
 for(var i = 0; i < listOfResults.length; i++) {
 var h3 = "<div><h3><a href='http://en.wikipedia.org/wiki/" + listOfResults[i].title + "' target='_blank'>";
 h3 += listOfResults[i].title + "</a></h3>";
 $(".results").append(h3);
 var p = "<p>" + listOfResults[i].snippet + "</p></div>";
 $(".results").append(p);
 }
 
 $(".results").css("display", "block");
}

In this function, we’ll diplay the title and snippets. And just style it how you want it to look in your CSS.

We can add the link by using the URL and the title as you can see in the anchor tag of variable named h3.

You can append the results in your div then display it.

So what if the user erases her first input? Then we’re going to erase the results too.

How?


$(".fa-times").click(function() {
$("#article").val("");
$(".results div, .results p").remove();
$(".results").css("display", "none");
});

If the user clicks on the close icon, then we’ll delete the value of the text field and the div. We’ll also hide the div again.

Click here to see the whole code.

 

And that’s it. That’s how we can build a wikipedia viewer.

I hope that you can understand it.

Still, I recommend customizing and experimenting it to achieve your desired result.

Good luck!

 

Love,
Eirin

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s