Wiki Viewer

Wiki Viewer

by Wisdom Abioye

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
  <h1 class="text-center"> Wikipedia Viewer </h1>


  <form class="col-lg-4 input-group" name="search" id="form">

    <input type="text" id="title" placeholder="Search title" class="form-control">

    <span class="input-group-btn">
      <button type="button" class="btn btn-secondary" id="btn">Go!</button>
    </span>
  </form>


  <div id="result">

  </div>
</body>

CSS

body {
  height: 100%;
  background: #092B40;
  color: orangered;
  font-family: serif;
  overflow: auto;
  font-size: 24px;
}

h1 {
  font-size: 50px;
  padding: 10px;
}

.col-lg-4 {
  margin: auto;
}

JavaScript

var wResult = document.getElementById("result");
var summary, articleTitle, apiUrl;

function getResult() {
  var inputTitle = document.getElementById("title").value;

  apiUrl = "https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&indexpageids=1&redirects=1&formatversion=latest&srsearch=" + inputTitle + "&srlimit=10";

  $.getJSON(apiUrl, function(response) {
    summary = response.query.search[0].snippet;
    wResult.innerHTML = summary;
  });

}
var inputBtn = document.getElementById("btn");
inputBtn.addEventListener("click", getResult);