(36)Build a Wikipedia Viewer

CODEPEN

HTML

<h1 id ="title">Wikipedia Viewer</h1>
<div id="action">
<div>  <a href="http://en.wikipedia.org/wiki/Special:Random" target="_blank" id="random">
    <i class="fa fa-random"> Click here for a random article</i>
  </a></div>
  <input type="text" id="input" placeholder="Search">
  <<i class="fa fa-search" id="searchBtn"></i>
</div>
<div id="main"></div>

CSS

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

#title {
  color: white;
  text-align: center;
  font-size: 3.2rem;
}

body {
  background:#565DB7;
  font-family: 'Lato', sans-serif;
}

.result {
  background: white;
  margin: 1% 3%;
  padding: 1% 2%;
}

a {
  position: relative;
  display: block;
  color: black;
  text-decoration: none;
  font-size:2.2rem;
}

#action {
   text-align: center;
  width: 50%; 
  margin: 30px auto 30px auto;
}

#random {
  display: inline;
}

.fa {
  color: white;
}

#input {
  margin:10%;
  display: inline;
  border-radius: 15px;
  border-style: none;
  outline: none;
  padding: 15px 15px;
}

#searchBtn {
  cursor: pointer;
  font-size:2rem
}

JS

var html;
var link;

$('#input').keydown(function (key) {
  if (key.keyCode === 13) {
    search = $('#input').val();
    callIt();
  
  } 
}); 

$('#searchBtn').click(function(){
  search = $('#input').val();
  callIt();
});

function callIt() {
      $.getJSON( 'https://en.wikipedia.org/w/api.php?action=query&prop=extracts&format=json&exsentences=1&exlimit=max&exintro=&exsectionformat=wiki&generator=search&redirects=&gsrsearch=' + search + '&gsrnamespace=0&callback=?', function( data ) {
  
      
      display(data.query.pages);
    });  
}

function display(data) {
  $('#main').empty();
  $.each(data, function (idx, el) {
    html = '
';
    html += '
' + el.title + '
';
    html += '
' + el.extract + '';
    $('#main').append(html);
  });
}

See the Pen Build a Wikipedia Viewer by YaroslavW (@YaroslavW) on CodePen.