SOURCE

$(document).ready(function() {

    var searchBar = $(".search-bar > input");
    var searchReset = $(".search-reset");
    var searchBtn = $(".search-btn");
    var randomBtn = $(".random-btn");

    //Toggle Reset
    searchBar.keyup(function() {
        if ($(this).val()) {
            searchReset.show();
        } else {
            searchReset.hide();
        }
    });

    //Execute Reset & Clean Value
    searchReset.click(function() {
        searchBar.val('');
        $(this).hide();
        $(".result").hide();
    });

    function getData() {
        //Get Data from Wikipedia
        var api = "https://en.wikipedia.org/w/api.php?action=query&prop=extracts&exlimit=max&format=json&exsentences=1&exintro=&explaintext=&generator=search&gsrlimit=10&gsrsearch=";
        var getLink = api + searchBar.val();
        var html = "";
        var goLink = "http://en.wikipedia.org/?curid=";

        $.ajax({
            url: getLink,
            type: "get",
            dataType: "JSONP",
            success: function(data) {
                var results = data.query.pages;
                var pgs = Object.keys(results); //returns array of enumerable properties
                pgs.forEach(function(page) { //get every properties for results
                    var title = results[page].title;
                    var extract = results[page].extract;
                    var pageLink = goLink + results[page].pageid;

                    //create elements and show'em
                    html += "<div class='result'><a href='" + pageLink + "' target='_blank'><h3 class='result-title'>" + title + "</h3></a><p class='result-content'>" + extract + "</p></div>";
                });

                $("section").html(html);
            },
            error: function(x,s,e) {
                alert(s);
            }
        });
    }

    getData();

    //Search it!
    searchBtn.click(function(event) {
        event.preventDefault();
        getData();
    });

    //Get a random page
    function RandomNum(Min, Max) {
        var Range = Max - Min;
        var Rand = Math.random();
        var num = Min + Math.round(Rand * Range);
        return num;
    }
    randomBtn.click(function(){
    	var curid = RandomNum(10000, 9999999);
    	window.open("http://en.wikipedia.org/?curid="+curid);
    });

});

<div class="frame">
        <h1 class="title">Wikipedia Viewer</h1>
        <form class="search-bar">
            <span><i class="fa fa-times search-reset" aria-hidden="true"></i></span>
            <input type="text" required="required">
            <button type="submit" class="search-btn"><i class="fa fa-search" aria-hidden="true"></i></button>
            <button type="button" class="random-btn"><i class="fa fa-random" aria-hidden="true"></i></button>
        </form>
        <section></section>
    </div>
    <footer>Designed By <a href="http://www.alenhu.com/" target="_blank">Alen Hu</a></footer>

body
{
    font-family: Helvetica;

    background: #3d5058;
}

.title
{
    font-size: 60px;

    margin: 80px auto 40px;

    text-align: center;

    color: #f0ad4e;
}

input,
button
{
    outline: 0;
}
.search-bar
{
    width: 600px;
    height: 40px;
    margin: 0 auto 40px;
}
.search-bar > input
{
    width: 80%;
    height: 35px;
    padding: 0 5px;

    border: 2px solid transparent;
    border-radius: 5px;
}
.search-bar > input:hover,
.search-bar > input:active,
.search-bar > input:focus
{
    border-color: #f0ad4e;
}
.search-reset
{
    line-height: 39px;

    position: absolute;
    z-index: 9999;
    left: 62%;

    display: none;

    cursor: pointer;

    color: #f0ad4e;
}
.search-bar > button
{
    font-size: 14px;

    width: 7%;
    height: 39px;

    color: white;
    border: none;
    border-radius: 5px;
    background: #f0ad4e;
}
.search-bar > button:hover,
.search-bar > button:active,
.search-bar > button:focus
{
    cursor: pointer;

    background: #eb9114;
}

section
{
    display: block;

    margin-bottom: 40px;
}
.result
{
    width: 60%;
    height: auto;
    margin: 0 auto 10px;
    padding: 10px 20px;

    border-left: 8px solid white;
    background: white;
}
.result:hover,
.result:active,
.result:focus
{
    border-left: 8px solid #f0ad4e;
}
.result > a
{
    text-decoration: none;
}
.result-title:hover,
.result-title:active,
.result-title:focus
{
    color: #eb9114;
}
.result-title,
.result-content
{
    width: 95%;
    margin: 5px auto;
}
.result-title
{
    font-size: 18px;

    color: #f0ad4e;
}
.result-content
{
    font-size: 14px;

    color: #3d5058;
}

footer
{
    font-size: 14px;

    text-align: center;

    color: white;
}
footer > a
{
    text-decoration: none;

    color: white;
}
footer > a:hover,
footer > a:active,
footer > a:focus
{
    text-decoration: underline;
}