Cacher is the code snippet organizer for pro developers

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet" />

@import url('https://fonts.googleapis.com/css?family=Montserrat');

@media screen and(max-width:550px)
{
  body
  {
    padding:0px!important;  
  }
  
  .contents
  {
    margin:0px!important;
    padding:0px!important;
  }
  
  .result-list-container
  {
     margin:0px!important;
     min-width:320px!important;
  }

  .row
  {
    margin:0px!important;
  }
}

html, body
{
  width:100%;
  height:100%;
}

body
{
  font-family:Montserrat;
  min-width:320px;
  width:100%;
  height:100%;
  /*background-color:#b3e6ff;/*#adebeb;*/
  background: linear-gradient(#193366,#5b85d7) fixed;
}

.contents
{
  width:100%;
  margin:50px auto;
}

.row
{
  margin:20px!important;
}

h1
{
  color: #4da6ff;
  text-shadow:3px 3px 6px #29293d;
}

h2{text-shadow:2px 2px 10px #29293d;}

p
{
  color:#8585ad;
}

/***SEARCH INPUT SECTION***/

.searchInputGrp
{
  margin:20px; 
}

.searchInputFullSpan {
    display: inline;
    min-width:320px;
}

.searchDiv {
    padding: 10px;
}

#txtBoxQuery
{
  min-width:100px;
  max-width:100%;
  height: 40px;
  padding:5px 50px 5px 10px;
  background-color:transparent;
  border:3px solid #66c2ff;
  border-radius:30px;
  color:#cceeff;
  font-weight:bold;
  box-shadow:2px 2px 10px #29293d;
}
   
#btnSearch
{
  display:inline-block;
  float:left;
  position:relative;
  margin-left: -50px;
  height: 40px;
  width: 50px;
  background-color:transparent;
  border:none;
  color:#66c2ff;
  position:absolute;
}

#btnSearch > i
{
  color:#66c2ff;
}

#btnSearch:focus, #txtBoxQuery:focus
{
  outline:none;
}

#btnSearch:hover
{
  transform:scale(2); 
}

/**RESULT LIST SECTION**/
#resultsSection > .row
{
  margin-top:20px;
}

.result-list-container
{
  min-width:150px;
  margin:0 auto;
  margin:15px;
  padding:20px;
  background-color:tansparent;
  border-radius:25px;
  border:2px solid #66ccff;
  text-align:left;
  box-shadow:2px 2px 10px 2px #29293d;
}

.result-list-container > a  p, a 
{
  color:#bfbfbf;
}

.result-list-container > a:hover, a:visited, a:link
{
  text-decoration: none!important;
  color:#66ccff;
}

.result-list-container:hover
{
  transform:scale(1.1);
  text-decoration: none!important;
}


/**Random page button**/
#rndSearchGrp
{
  margin:10px 0px;
  padding:auto 0px!important;
}

#rndSearchGrp > button
{
  padding:0!important;
  background-color: transparent;
  border:0 solid transparent;
  outline: 0 !important;
  box-shadow: none;
}

#rndSearchGrp > button > label
{
  color: #00b8e6;
}


#rndSearchGrp > button:active
{
  outline: 0 !important;
}

#rndSearchGrp > button:focus
{
  outline: none !important;
}

#rndSearchGrp > button:hover
{
  transform: scale(1.2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>

/*
* Jan, 2016
* author: @wearenotgroot, FreeCodeCamp.com
* Greg
*/
$(document).ready(function(){
  /*INITIALIZATION AND EVENTHANDLER*/
  document.getElementById('btnSearch').addEventListener('click',search);
  document.getElementById('btnRndSearch').addEventListener('click',searchRnd);
  
  /*variables and references*/
  var list = $('#resultContentList'); //ref variable for the result list container
  var txtBoxQuery = $('#txtBoxQuery'); //ref variable for the input/textbox
  var rndQuery = 'https://en.wikipedia.org/wiki/Special:Random';
  
  /*Activate search while user is typing*/
  txtBoxQuery.on('input',search);
  
  /*
  * execute search when search button is pressed
  * 
  */
  function search()
  { 
    postQuery(getSearchValue());
  }
  
  /*
  * Go to a random page
  */
  function searchRnd()
  {
    window.open(rndQuery,'_blank');
  }
  
  /*
  * Get the search request that the user specified
  * fetches the text wrote in the textbox/textfield
  */
  function getSearchValue()
  {
    return txtBoxQuery.val();
  }
  
  /*
  * executes a post to the MediaWiki page
  * using jquery $.post()
  * a function is supplied to handle the results
  */
  function postQuery(query)
  {
    //https://crossorigin.me/
    if(query !== '')
    {
      $.getJSON('https://en.wikipedia.org/w/api.php?callback=?',{
                                                            action:'query',
                                                            generator:'search',
                                                            gsrnamespace:'0',
                                                            gsrsearch:query,
                                                            gsrlimit:'10',
                                                            prop:'pageimages|extracts',
                                                            pilimit:'max',
                                                            exchars:'200',
                                                            exintro:'',
                                                            explaintext:'',
                                                            /*exsentences:'1',*/
                                                            rawcontinue: '',
                                                            exlimit:'max',
                                                            format:'json',
                                                            formatversion:'2',                                                   
                                                          }, function(){}).done(getSearchResults).fail(errorHandling);


    }
  }
 
  /*
  * Handles the result data from $post command
  */
  function getSearchResults(data)
  {
    console.log(data);
    if(data.hasOwnProperty('query'))
    {
      var results = data['query']['pages'];

      list.empty();//clear the previous list

      for(var i = 0; i < results.length; i++)
      {
        if(results[i].hasOwnProperty('thumbnail'))
        {
          postResults(results[i].pageid,results[i].title, results[i].extract,results[i]['thumbnail']['source']);
        }
        else
        {
          postResults(results[i].pageid,results[i].title, results[i].extract,'_blank');
        }
      }
     }
  }
  
  /*
  * Display search result as a list
  */
  function postResults(pageid,title,extract,pageimage)
  {
    var html = "";
    
    if(pageimage !== '_blank')
    {
      html = '<div class=\"result-list-container\"><a href=\"https://en.wikipedia.org/wiki?curid='+ pageid +'\" target=\"_blank\">'+'<h2><img class=\"img-thumbnail\" src=\"' + pageimage + '\"></img> ' + title +'</h2><p>'+ extract +'</p></a></div>';
    }
    else
    {
      html = '<div class=\"result-list-container\"><a href=\"https://en.wikipedia.org/wiki?curid='+ pageid +'\" target=\"_blank\"><h2>'+ title +'</h2><p>'+ extract +'</p></a></div>';
    }
    
    list.append(html); //add item on the result list
  }
  
  
  /*
  * handle error and fail messages
  */
  function errorHandling(jqXHR, textStatus, errorThrown)
  {
    
  }
});

<div class="container text-center">
  <div class="contents">
    <h1 style="text-shadow:3px 3px 6px #29293d;">COol Search</h1>
    <p><small>www.wikipedia.org</small></p>
    
    
    <!--Textfield--->
    <div class="searchInputGrp">
        <div class="searchInputFullSpan">
          <input id="txtBoxQuery" type="text" class="inputField" placeholder="Search for..."/>
        </div>
        <button id="btnSearch" type="button"><i class="fa fa-search fa-1x"></i></button>
        
        <div id="rndSearchGrp">
          <button id="btnRndSearch" class="btn btn-default" type="button">
            <label>Feeling lucky?<label>
          </button>
        </div>
    </div>
    <p><small>&copy; 2016 WeAreNotGroot.com and FreeCodeCamp.com. All Rights Reserved</small></p>
      
    <!---Search Results----->
    <div id="resultsSection" class="row pull-center">
      
      <div id="resultContentList" class="col-xs-12 col-lg-12">
      
          <!---HERE GOES THE SEARCH RESULTS--->
        
      </div>
    </div>
    
    
  </div><!-----end contents-->
  
</div>