<div class="container-fluid">
  <form>
    <div class="search-bar">
    <h1 class="search-header"> Wikipedia Viewer </h1>
    <input id="search-text"   type="text"  value="">
    <button id="search-button">Search</button>
    <button id="random-button"> Random </button>
    </div>
  </form>
  
  <div class="container">
    <div id="search-results"> </div>
  </div>
</div>

body {
  background-color:lightblue;
}

.results {
  background-color:silver;
  border-style: solid;
  margin: 10px 0px 0px 0px;
  text-align: center;
}

.search-bar {
  text-align: center;
  margin: 20px 0px 0px 0px;
}

.result-subtext {
  text-align: left;
  padding: 0px 20px 0px 20px;
}

.wiki-header {
  background-color: silver;
}

function createPost(ele){
  $("#search-results").append( 
   "<div class=\"results\">" +
   "<a href=\"https://en.wikipedia.org/wiki/" + 
    ele.title + "\">" +
   "<h3 class=\"wiki-header\">" + ele.title + "</h3>" +
   "<p class=\"result-subtext\">" + ele.snippet + "</p>" +
    "</a>" +
    "</div>"
  );
}

function searchWiki() {
  $("#search-results").empty();

  $.ajax({
    url: 'https://en.wikipedia.org/w/api.php',
    data: {
      action: 'query',
      list: 'search',
      srsearch: `${$("#search-text").val()}`,
      srlimit: '10',
      format: 'json',
    },
    dataType: 'jsonp',
    success: function(response) {
      response.query.search.forEach(function(ele){
         createPost(ele);
      });
    }
  });
}

$(document).ready(function() {
  $("#search-button").on("click", function(e) {
    e.preventDefault();
    searchWiki();
  });
  $("#random-button").on("click", function(e)  {
     e.preventDefault();      window.open('http://en.wikipedia.org/wiki/Special:Randompage'); 
  });
});