<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>

<div id="content">

  <p><a href="https://en.wikipedia.org/wiki/Special:Random"  target=_blank>Click here for a random article</a></p>

  <canvas id="myCanvas" width="50" height="50"></canvas> 

  <input text="text"/>

<p>Click icon to search</p>

</div>

<div id = "result">

</div>

$(document).ready(function(){

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.arc(25,25,22,0,2*Math.PI);

ctx.strokeStyle="#96B97D";

ctx.lineWidth=3;

ctx.stroke();

  $("input").hide();

$("canvas").mousedown(function(){

  $("canvas").hide();

  $("input").show();

})

  $("input").mouseout(function(){

      if (!$("input").val())

      {

     $("canvas").show();

     $("input").hide();

        $("div#result").empty();

        $("div#content").animate({marginTop:'100px'});

      }          

  })

   $("input").keydown(function(event){ 

        if (event.which==13)

         search();

  });

   function search(){

    var url='https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&origin=*&gsrsearch=';

    url = url+$("input").val();

    $.ajax({

      url:url,

      dataType:"jsonp",

      jsonp:"callback",

      success:function(result){

        $("div#result").empty();

        var data = result.query.pages; 

        var arr =Object.keys(data); 

        $("div#content").animate({marginTop:'5px'});

      for (var i=0;i<arr.length;i++){

        var h4 = $("<h4></h4>").text(data[Number(arr[i])].title);

        var p = $("<p></p>").text(data[Number(arr[i])].extract);

         var span = $("<div class='item'></div>").html(h4);

        span.append(p);

        $("div#result").append(span);

       }

       $("div.item").click(function(){

       var  link = "https://en.wikipedia.org/?curid="+arr[$(this).index()];         

          window.open(link);     

        })

      }

    })

  }

});

body{

  background-color:#092B40;

  text-align:center;

}

div#content{

margin:100px auto 0 auto;

  position:relative;

}

p{

  font-size:1.4em;

  color:#E7FFFF;  

}

a,a:hover{

  color:#E7FFFF;

  text-decoration:none;

}

input{

 height:44px;

  width:280px;

  border:2px solid #96B97D;

  border-radius:10px;

}

div.item{

  background-color:#F5F5F5;

  padding:20px;

  cursor:pointer;

  width:80%;

  margin:3px auto;

   border-left:5px solid #092B40;

  text-align:left;

}

div.item:hover{

  border-left:5px solid orange;

}

div.item>h4,div.item>p{

  margin:5px;

  padding:5px;

  color:black;

  font-size:1.1em;

}