Wikipedia Viewer3

index.html

<div class = "text-center">
  <h1>Wikipedia Viewer</h1>
   <a href="https://en.wikipedia.org/wiki/Special:Random" id ="random">Click here for a random article</a> 
 </div>
<div class = "text-center" id = "search">
  <button><img src= "http://icons.iconarchive.com/icons/zerode/plump/128/Search-icon.png" alt="Click to search" id="clickImage"></button>
  <h3>Click icon to search</h3>
</div>
<div class="list-group" id = "lista">
  
  
</div>

script.js

$(document).ready(function(){
  $("img").on("click", function(){
    $("img").remove();
    $("h3").remove();
    $("#search").html("<form><input type=text name=query id = what><input type=button value=Search id = find></form>");
    $("#find").click(function(){
      var input = document.getElementById("what").value;
      var wiki = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + input + "&limit=10&namespace=0&utf8&snippet&format=json&$parse&callback=?";
 $.getJSON(wiki, function(data){
 for (var i=0;i<10;i++){
   
 $("#lista").append("<a href=" + data[3][i] + ">" +
"<li>" + data[1][i] + "</li>" +
  "<p>" + data[2][i] + "</p>" +
"</a>");
  
 }
 });
    });
  });
  
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.css

a{
  color: black;
  font-size:30px;
  
}
a:hover{
  text-decoration:none;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

wikipedia-viewer3.markdown

Wikipedia Viewer3

A Pen by Zoran Stanic on CodePen.

License.