WikiPedia Viewer-FCC

In this example below you will see how to do a WikiPedia Viewer-FCC with some HTML / CSS and Javascript

It is a simple pen designed to view Wiki articles and to read Wiki Wisdom

Thumbnail
This awesome code was written by 3, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 3 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>WikiPedia Viewer-FCC</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

    <div id="customSearch">
    <div class="container-fluid text-center" id="imageWiki" >
  <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png">
  </img>
  </div>
    <div class="input-group container-fluid text-center">
      <input id="search" type="search" class="form-control input-lg" placeholder="Search" />
      </div>
<div class="container-fluid text-center">
        <span >
          <button class="btn btn-lg" type="button">
            <i class="fa fa-search"></i>
          </button>
          <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank" target="_blank"> 
             <button class="btn btn-lg">
               <i class="fa fa-random fa-fw"></i>
             </button>
          </a>
                     </span>
  </div>
                </div>
            </div>
<div class="container">
<article class="results">
      </article>
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/3/wikipedia-viewer-fcc-YZYvyL */
#customSearch{
  padding:10% 20% 0% 20%;
  }
#customSearch button{
    margin: 2px 0 0 0;
    background: none;
    border: 0;
    color: #666666;
    padding: 0 8px 0 10px;
    border-left: solid 1px #ccc;
}
body{
  background-color:#cdcfd3;
}
h3{
 color:black; 
}
img{
  width:auto;
}
img{
  width:100px;
  height:100px;
}


/*Downloaded from https://www.codeseek.co/3/wikipedia-viewer-fcc-YZYvyL */
var arrResults = [];
var html = '';
function Result(title, snippet) {
  this.title = title;
  this.snippet = snippet;
}

function search() {
  $.ajax({
    url: 'https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&srsearch=' + $('#search').val(),
    dataType: 'jsonp',
    type: 'POST',
    headers: {
      'Api-User-Agent': 'Example/1.0'
    },
    success: function(data) {
      $('.results').empty();
      arrResults.length = 0;
      var resArr = data.query.search;
      for (var result in resArr) {
        arrResults.push(new Result(resArr[result].title, resArr[result].snippet));
        html = '<div id="articles" class="well"><a href="https://en.wikipedia.org/wiki/' + resArr[result].title + '"target="_blank"><h3>' + resArr[result].title + '</h3></a><p>' + resArr[result].snippet + '</p></div>';
        $('.results').append(html);
      }
    }
  });
    $('#search').unbind('keyup');
  $('#search').keyup(function() {
    search();
  });
}

$('#search').keyup(function() {
  search();
});

Comments