Wikipedia Viewer

index.html

  <div class="main-container">
     <a class="wiki-link" href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Wikipedia Random article <i class="fa fa-external-link" aria-hidden="true"></i></a>

    <div class="input-group search-group">
      <input type="text" class="form-control search" placeholder="Search for...">
      <span class="input-group-btn search-go">
            <button class="btn btn-secondary" type="button">Search Wikipedia!</button>
      </span>
    </div>
    <ul class="list-continer">
    </ul>

  </div>

script.js

      // Using jQuery
$(function() {
    $(".search-go").on("click", doSearch);

    $(".search").on ("keypress", function(e) {
        if(e.which == 13) {
          doSearch();
        }
    });

    function doSearch(){
      var searchInput = $('.search').val();
      if( searchInput.length < 1 ){return false;}
      var wikiUrl = "https://en.wikipedia.org/w/api.php";
          $.ajax({
            url: wikiUrl,
            data: { 
              'format':'json',
              'action':'query',
              'generator':'search',
              'gsrnamespace':'0',
              'gsrlimit':'10',
              'prop':'pageimages|extracts',
              'pilimit':'max',
              'exintro':'',
              'explaintext':'',
              'exsentences':'1',
              'exlimit':'max',
              'gsrsearch': searchInput.toString()
            },
            dataType: 'jsonp',
            jsonp: 'callback',
            jsonpCallback: 'jsonp_callback',
            success: function (data, status) {
                showResult(data);
                $(".list-items").hover( 
                  function() {
                     $( this ).find( ".fa-external-link" ).removeClass('hide');
                  }, function() {
                     $( this ).find( ".fa-external-link" ).addClass('hide');
                  }
                );
            },
            error: function(jqXHR, textStatus, errorThrown) {
              alert(textStatus +" "+ errorThrown);
            }
          });
    }
    function showResult(data){
      var html = '';
      Object.keys(data.query.pages).map(function(key, index) { 
          html += '<li class="list-items"><a href="https://en.wikipedia.org/?curid='+key+'" target="_blank"><div class="entry-thumbnail">'+ getThumbnail.call( data.query.pages[key] ) + '</div><div class="entry-title">'+ data.query.pages[key].title +'</div><div class="entry-extract">'+data.query.pages[key].extract + ' <i class="fa fa-external-link hide" aria-hidden="true"></i></div></a></li>';
      });
      function getThumbnail( items ){
        if (this.hasOwnProperty("thumbnail")){
           return '<img src="'+ this.thumbnail.source +'" />';
        }
          return "";
      }
      
      $(".list-continer").empty();
      $(html).appendTo( ".list-continer" );
    }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.css

    a,
    a:link,
    a:visited,
    a:hover,
    a:active {
      text-decoration: none;
    }
    
    body {
      background-color: rgba(49, 112, 143, 0.1);
      color: #555;
      font-size: 2.5rem;
    }
    
    .main-container {
      background: radial-gradient(hsla(0, 0, 100%, 1), rgba(41, 41, 41, 0.1));
      box-shadow: 2px 3px 6px 0 rgba(0, 0, 0, .25);
      margin: 5% auto;
      width: 70%;
    }
    
    .wiki-link {
      font-size: medium;
      margin-left: 11px;
    }
    
    .list-continer {
      font-size: medium;
      color: currentColor;
      list-style: none;
      margin-top: 1%;
      padding: 0;
    }
    
    .list-items {
      padding: 10px;
      border-right: 10px solid transparent;
    }
    
    .list-items:hover {
      border-right: 10px solid white;
      background-color: #eaeaea;
    }
    
    .list-items a {
      display: flex;
      flex-flow: row nowrap;
      align-items: flex-start;
      flex: 1 100%;
    }
    
    .entry-title {
      flex: 1 15%;
    }
    
    .entry-thumbnail {
      flex: 1 10%;
      padding-right: 5px;
    }
    
    .entry-extract {
      flex: 1 90%;
    }
    .entry-thumbnail img {
      width: 100%;
      height: 100%;
    }
    
    .hide {
      display: none;
    }
    
    .entry-extract .fa.fa-external-link {
      color: black;
    }
    
    @media only screen and (max-width: 1020px) {
      .entry-thumbnail {
        flex: none;
      }
      .main-container {
        width: 90%;
      }
      .entry-thumbnail {
        flex: none;
      }
    }

styles

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

wikipedia-viewer.markdown

Wikipedia Viewer

A Pen by Ali Rokni on CodePen.

License.