Wikipedia Viewer

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Wikipedia Viewer</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>

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

  
</head>

<body>

  <div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 text-center">
      <img class="img img-responsive" src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png" />
    </div>
  </div>
  <div class="row input-row">
    <div class="col-xs-12 text-center">
      <input type="text" id="text" placeholder="Search Wikipedia">
      <button class="search">Search</button>
      <button class="random"><i class="fa fa-random" aria-hidden="true"></i></button>
    </div>
  </div>
  <div class="row results-row">
    <div class="col-xs-12 text-center">
      <div id="results"></div>
    </div>
  </div>
  <div class="row footer-row">
    <div class="col-xs-12 text-center">
      <h5>Coded By Conor Hinchee</h5>
    </div>
  </div>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/captnstarburst/wikipedia-viewer-NrqoBx */
body{
  background-color: #469496;
  padding-top: 5%;
}
img{
  margin: auto;  
}
.input-row{
  padding-top: 3%;
}
.footer-row{
  position:relative;
  bottom: 0;
}
.results-row{
  color: black;
}
 a:link{
   color: white; 
}

/*Downloaded from https://www.codeseek.co/captnstarburst/wikipedia-viewer-NrqoBx */
$(document).ready(function() {
  $(".search").on("click", function() {
    var searchTerm = $("#text").val();
    var api =
      "https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=" +
      searchTerm +
      "&callback=?";
    // alert(api);
    //window.open(api);
    $.getJSON(api, function(data) {
      var pages = data.query.search;
      pages.forEach(function(page) {
        var url_title = page.title.split(" ");
        
        url_title = url_title.join("_");
        $("#results").append(
          "<div><h3><a target = '_blank' href = 'https://en.wikipedia.org/wiki/" +
            url_title +
            "'>" +
            page.title +
            "</a></h3> <p>" +
            page.snippet +
            "</div>"
        );
      });
    });
  });
  $(".random").on("click", function() {
    window.open("https://en.wikipedia.org/wiki/Special:Random");
  });
});

Comments