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 eolculnamo2, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright eolculnamo2 ©

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Wikipedia Viewer</title>
  <link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
  
  <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" href="css/style.css">

  
</head>

<body>

  <center>
  <h1 id ="welcome"> 
  </h1>
</center>

<h1 class="quote"> "Get Wisdom at Any Cost"</h1>
<center>
  <input type="text" id="wisdom">
  </input>
  <button class ="btn btn-primary" id="submit">
Search
</button>
</center>
<center>
<button id="clear" class= "btn btn-primary">
  Clear
</button>
</center>
<center>
<div id="text">

</div>
</center>
  <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/eolculnamo2/wikipedia-viewer-aWEryX */
body{
  background-color: #3b3d3f;  
}
.quote{
 margin-top: 10%;
 text-align: center;
 color: white;
 font-family: Cinzel;
  
}
#welcome{
margin-top: 5%;  
}
#text{
  list-style-type: none;
  background-color: white;
  margin-left: 35%;
  margin-right: 35%
}

/*Downloaded from https://www.codeseek.co/eolculnamo2/wikipedia-viewer-aWEryX */
//search, display, link to wiki

//var name = prompt("enter your name") 
//$("#welcome").html("Welcome "+name);

//var api = "https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=dog";

$("#submit").on("click", function() {
  var taken = $("#wisdom").val();
  $("#text").empty();
  var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" +
    taken +
    "&format=json&origin=*";

  $.ajax({
    type: "GET",
    url: url,
    async: false,
    dataType: "json",
    success: function(data) {
      console.log(data[1]);
      for (i = 0; i < data[1].length; i++) {
        $("#text").append(
          "<li><a target ='_blank'  href= " +
            data[3][i] +
            ">" +
            data[1][i] +
            "</a><p>" +
            data[2][i] +
            "</p></li>"
        );
      }
    },
    error: function(errorMessage) {
      alert("Error");
    }
  });

});
  $("#clear").on("click", function(){
  $("#text").empty();
  $("#wisdom").val("");
});

Comments