Wikipedia

index.html

<div class="container text-center">
  <br /><br /><br /><br /><h1>Wikipedia</h1><br />
  <div class="row">
    <div class="col-md-12">
      <input placeholder="Search Wikipedia - Knowledge"class="form-control" id="searchwikipedia"/><br />
    </div>
    <ul class="list-unstyled">
      <li id = "wiki" class="btn btn-default wiki">Wikipedia Search</li>
      <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank" class="btn btn-default random">I'm Feeling Lucky!</a>
    </ul>
  </div><br />
  <div>
    <div id="wikioutput" class="text-left">
    </div><br /><br />
  </div>
</div>

script.js

$(document).ready(function() {
  $("#wiki").click(function() {
    var searwiki = $("#searchwikipedia").val(); // input bar id
    var wikiurl = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searwiki + "&format=json&callback=?";
    $.ajax({
      type: "GET",
      url: wikiurl,
      async: false,
      dataType: "json",
      success: function(data) {
        /*console.log(data[1][0]); // heading
        console.log(data[2][0]); // description
        console.log(data[3][0]); // recommended link*/
        $("#wikioutput").html("");
        for (var i = 0; i < data[1].length; i++) {
          $("#wikioutput").append("<div class='img-thumbnail'><h4><a href= " + data[3][i] + ">" + data[1][i] + "</a></h4><p>" + data[2][i] + "</p></div><br /><br />");
        }
        $("#searchwikipedia").val("");
      },
      error: function(errorMessage) {
        alert("Please give Authentic Input!");
      }
    });
  });
  $("#searchwikipedia").keypress(function(key) { // enter key
    if (key.which == 13) {
      $("#wiki").click();
    }
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.css

@import
  url("https://fonts.googleapis.com/css?family=Noto+Sans");
* {
  font-family: 'Noto Sans', sans-serif;
}
body {
  background-color: #fafafa;
}
h1 {
  font-size: 4em;
}
.row {
  margin-left: 150px;
  margin-right: 150px;
}
.wiki, .random {
  background-color: Bisque
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

wikipedia.markdown

Wikipedia

A Pen by Mohammed Saifuddin on CodePen.

License.