<div id='iconContainer'>
    <p id='icon'>W</p>
  <div id="ui">
    <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank" class="left button"><span>Feeling lucky </span><i class="fas fa-random"></i></a>
    <input type="text" placeholder="Search for the top 10 wiki results"></input>
    <button class="right button"><span>Search </span><i class="fas fa-search" id="searchbtn"></i></button>
  <div id="no-text">Please enter some text</div>
  <h4 class="no-results"></h4>
  <div id="searches">
<div class="result-0"></div>
<div class="result-1"></div>
<div class="result-2"></div>
<div class="result-3"></div>
<div class="result-4"></div>
<div class="result-5"></div>
<div class="result-6"></div>
<div class="result-7"></div>
<div class="result-8"></div>
<div class="result-9"></div>
@import url('https://fonts.googleapis.com/css?family=Crimson+Text')

$blue: #0082C8
$orange: #FF9000
  display: none
html body
  background: $blue
  max-width: 56px
  margin: 50px auto 25px auto
  max-width: 56px
  color: white
  font-family: 'Crimson Text', serif
  font-size: 30pt
  margin: 25px auto 75px
  width: 35%
  min-width: 200px
  min-height: 45px
  text-align: center
  display: flex
  display: inline
  margin: 0
  padding: 0
  margin: 0
  border: 1px white solid
  color: white
  background-color: $blue
  padding: 10px
  flex: 1
  min-height: 24px
    cursor: pointer
    background-color: darken($blue, 10%)
    color: white
    background-color: darken($blue, 15%)
  border-radius: 10px 0px 0px 10px
  -moz-border-radius: 10px 0px 0px 10px
  -webkit-border-radius: 10px 0px 0px 10px
  border-radius: 0px 10px 10px 0px
  -moz-border-radius: 0px 10px 10px 0px
  -webkit-border-radius: 0px 10px 10px 0px
  text-align: center
  margin: 0
  width: 70%
  border: 1px white solid
  padding: 10px
  display: none
  background: white
  color: $blue
    cursor: text
  display: none
  color: darken($orange, 20%)
  border: 1px $orange solid
  background: lighten($orange, 40%)
  border-radius: 10px 
  -moz-border-radius: 10px
  -webkit-border-radius: 10px
  width: 35%
  margin: -65px auto
  text-align: center
  padding: 10px
  overflow: hidden
  display: none
  background: white
  padding: 60px
  min-height: 800px
  text-align: center
  border-bottom: 1px solid #dcdcdc
  padding: 20px
  display: none
  width: 100%
  border-bottom: 1px solid #dcdcdc
  padding: 20px
// get the search query back from wiki
function getSearch(findThis) {
   $("[class*='result-']").css("display", 'none');
  var wikiURL =
    "https://en.wikipedia.org/w/api.php" +
    "?callback=?" +
    "&action=opensearch" +
    "&format=json" +
    "&profile=fuzzy" +
    "&limit=10" +
    "&prop=imageinfo" +
    "&search=" +

  $.getJSON(wikiURL, function(jsonlist) {
    var searchQuery = jsonlist[0];
    if (jsonlist[1][0] == undefined) {
        "Unfortunately your search for " +
          searchQuery +
          " yield zero results. <br /> Please Try again"
    } else {        
      var hits = jsonlist[1].length
      $('.no-results').html('Here are the top '+hits+' results for your search "'+jsonlist[0]+'"');
      for (i = 0; i < hits; i++) {
        var title = jsonlist[1][i];
        var excerpt = jsonlist[2][i];
        var wikilink = jsonlist[3][i];
        $(".result-" + i).css("display", 'inline-block');
        $(".result-" + i).html("");
        $(".result-" + i).html("<h2>" + title + "</h2>");
        $(".result-" + i).append("<p>" + excerpt + "</p>");
        $(".result-" + i).append("<a href=" + wikilink + " target='_blank'> Read More </a>");        
      } // end loop
  }) //end json
    .done(function(jsonlist) {

    $('#ui').animate({"margin-bottom": "25px"});
}); //end show results
}// end getSearch

// show & hide the search box on button click.
$(".right").on("click", function() {
  if ($('#searchbtn').hasClass("fa-times")) {
    $('#ui').animate({"margin-bottom": "75px"});
    .animate({ width: "toggle" })
  $("#searchbtn").toggleClass("fa-times", 1000);

//call the search function on enter keypress from textbox when text box is not empty
$("input").keypress(function(e) {
  if (e.which == 13) {
    var searchVal = $("input").val();
    if (searchVal) {
    } else {

// script to run on load
$("document").ready(function() {

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css
  2. https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/1.3.1/css/fontawesome-iconpicker.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/jqueryui-editable/js/jqueryui-editable.js