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 divi-The-Great, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright divi-The-Great ©
  • HTML
  • CSS
  • JavaScript
    <div class="container-fluid" id="fuori">
    <h1>Wikipedia Search</h1>
    <h4>Wikipedia articles</h4>
    <a href="https://en.wikipedia.org/wiki/Special:Random" target_ "blank">
      <img src="https://vignette1.wikia.nocookie.net/dccu/images/7/70/Icon-Wikipedia-inactive.png/revision/latest?cb=20160324075933" alt="" height="200" width="200" />
    </a>
    <input class="form-control" id="searchTerm">

    <button id="search" type="button" class="btn btn-primary btn-block"><i class="fa fa-search fa-2x" aria-hidden="true"style="color:white;"></i></button>
</div>

<div class="container">
 <div class = "row">
<div class=col-offset-4 col-md-12 col-sm-6">
  <ul id="output">


  </ul>

</div>
                 </div>
</div>
<!-- closes container div -->

/*Downloaded from https://www.codeseek.co/divi-The-Great/wikipedia-viewer-NgOYpp */
    #fuori {
  margin:20px;
}
.sub {
  margin : 20px;
}
#search {
  color : black;
}
p {
  font-family: "Times New Roman", Georgia, Serif;
}

h1,h4 {
  font-family: 'Amatic SC', cursive;
  font-size: 70px;
    text-align : center;
}

img {
  display: block;
    margin: auto;
}


/*Downloaded from https://www.codeseek.co/divi-The-Great/wikipedia-viewer-NgOYpp */
    $(document).ready(function(){
  $("#search").on("click",function(){
    var searchTerm = $("#searchTerm").val();
    var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&format=json&callback=?";
    $.ajax({
      type:"GET",
      url : url,
      async : false,
      dataType : "json",
      success : function(data){
        for(var i = 0 ; i < data[1].length ; i++){
        $("#output").prepend("<li><h3>" + data[1][i] + "</h3>" + data[2][i] +'<a href="' +data[3][i] +'">' + data[3][i] + "</a></li>");
        };
        $("#searchTerm").val("");
      },
      error : function(errorMessage){
        alert("Error");
      }
    });
  });
});

Comments