<div class="search">
  <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Click here for a random article</a><br/>
  <div id="search-animation-area">
  <div id="search-input" class="hidden">
  <form id="search-form">
    <input type="text" /><a href="#" id="search-close-icon"><i class="fa fa-times"></i></a>
    </form>
  </div>
  <a href="#" id="search-icon"><i class="fa fa-search"></i></a>
    </div>
  <p>Click icon to search</p>
</div>
<ul id="result">
</ul>

html, body {
  height:100%;
  width:100%;
}
body {
  background: #00838f;
}
.search {
  width:300px;
  font-size:18px;
  color:#ffffff;
  text-align:center;
  margin:0 auto;
}
.search a {
  color: #ffffff;
}
.search a i {
  color:#333333;
}
.search a#search-close-icon i {
  color:red;
  margin-left:-30px;
}
.search input {
  border-radius:22px;
  height:44px;
  border:none;
  padding-left:10px;
  color:#353535;
  border:4px solid orange;
  width:280px;
}
#search-input {
  padding-top:15px;
}
#search-icon {
  font-size:48px;
}
#search-animation-area {
  height:70px;
}
#result {
  width:70%;
  margin:0 auto;
}
#result li {
  padding-left:6px;
  list-style:none;
  margin-top:20px;
}
#result li:hover {
  border-left:6px solid orange;
  padding-left:0px;
}
#result li a {
  background:#ffffff;
  display:block;
  padding:15px;
  color:#353535;
  font-size:18px;
  text-decoration:none;
}

var apiBase = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=";

var centered = false;
function verticalCenter(){
  var verticalAlign = 10;
  if(!centered) {
    var pageHeight = $("body").height();
    var elementHeight = $(".search").height();
    verticalAlign = (pageHeight)/2;
    centered = true;
  } else {
    centered = false;
  }
  $(".search").css("margin-top",verticalAlign);
}

function showResult(response){
  var titleList = response[1];
  var descriptionList = response[2];
  var linkList = response[3];
  $("#result").empty();
  $.each(titleList, function(index, item){
    var liObj = $("<li>");
    var linkObj = $("<a>").attr("href", linkList[index]).attr("target","_blank");
    var titleObj = $("<p>").append($("<strong>").text(titleList[index]));
    var descObj = $("<p>").text(descriptionList[index]);
    linkObj.append(titleObj);
    linkObj.append(descObj);
    liObj.append(linkObj);
    $("#result").append(liObj);
  });
  $("#result").fadeIn("fast");
}

$(document).on("click", "#search-icon", function(e){
  e.preventDefault();
  $("#search-icon").fadeOut("fast",function(){
    $("#search-input").fadeIn("fast");
  });
});

$(document).on("click", "#search-close-icon", function(e){
  e.preventDefault();
  $("#result").fadeOut("fast");
  $("#search-input").fadeOut("fast",function(){
    $("#search-icon").fadeIn("fast");
      if(!centered) {
        verticalCenter();
      }
      $("#search-form input").val("");
  });
});

$("#search-form").on("submit", function(e){
  e.preventDefault();
  if(centered) {
    verticalCenter();
  }
  var val = $("#search-form input").val();
  if($.trim(val) == "") {
    return;
  }
  $("#result").fadeOut("fast");
  $.ajax({
    url: apiBase + $("#search-form input").val() + "&callback=JSON_CALLBACK",
    type: "GET",
    dataType: 'jsonp',
    success: function(response){
      showResult(response);
    }
  });
})

$(function(){
  verticalCenter();
  $("#search-input").hide().removeClass("hidden");
  $("#result").hide();
})