<header>
  <div id='iconContainer'>
    <p id='icon'>W</p>
  </div>
</header>
<section>
  <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>
  <div id="no-text">Please enter some text</div>
</section>
<main>
  <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>
  </div>
</main>
@import url('https://fonts.googleapis.com/css?family=Crimson+Text')


$blue: #0082C8
$orange: #FF9000
span 
  display: none
  
html body
  background: $blue
  
header
  
#iconContainer
  max-width: 56px
  margin: 50px auto 25px auto
  
#icon
  max-width: 56px
  color: white
  font-family: 'Crimson Text', serif
  font-size: 30pt
  
#ui
  margin: 25px auto 75px
  width: 35%
  min-width: 200px
  min-height: 45px
  text-align: center
  display: flex
form
  display: inline
  margin: 0
  padding: 0
  
.button
  margin: 0
  border: 1px white solid
  color: white
  background-color: $blue
  padding: 10px
  flex: 1
  min-height: 24px
  &:hover
    cursor: pointer
    background-color: darken($blue, 10%)
    color: white
  &:active
    background-color: darken($blue, 15%)
  
.left
  border-radius: 10px 0px 0px 10px
  -moz-border-radius: 10px 0px 0px 10px
  -webkit-border-radius: 10px 0px 0px 10px
  
.right
  border-radius: 0px 10px 10px 0px
  -moz-border-radius: 0px 10px 10px 0px
  -webkit-border-radius: 0px 10px 10px 0px
  
input
  text-align: center
  margin: 0
  width: 70%
  border: 1px white solid
  padding: 10px
  display: none
  background: white
  color: $blue
  &:hover
    cursor: text
  
#no-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
  
main
  display: none
  background: white
  padding: 60px
  min-height: 800px
  
.no-results
  text-align: center
  border-bottom: 1px solid #dcdcdc
  padding: 20px
  
[class*="result-"]
  display: none
  width: 100%
  border-bottom: 1px solid #dcdcdc
  padding: 20px
  
View Compiled
// 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=" +
    encodeURI(findThis);

  $.getJSON(wikiURL, function(jsonlist) {
    var searchQuery = jsonlist[0];
    if (jsonlist[1][0] == undefined) {
      $(".no-results").html(
        "Unfortunately your search for " +
          searchQuery +
          " yield zero results. <br /> Please Try again"
      );
    } else {        
      $("input").val('');
      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) {

    $('main').slideDown();
    $('#iconContainer').slideUp();
    $('#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")) {
     $('main').slideUp();
    $('#iconContainer').slideDown();
    $('#ui').animate({"margin-bottom": "75px"});
  }
  
  $("input")
    .animate({ width: "toggle" })
    .focus()
    .val("");
  $("#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) {
      $("#no-text").slideUp();
      getSearch(searchVal);
    } else {
      $("#no-text").slideDown();
    }
  }
});

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