WIKI VIEWER

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>WIKI VIEWER</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

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

  
</head>

<body>

  <div id="container">
  <h1 style="color:white">Wikipedia Viewer</h1><br>
  <p style="color:white"> Wanna read a random article? Click <a href="https://en.wikipedia.org/wiki/Special:Random " target="-blank "> here</a></p>
  <p style="color:white">Or...</p>
  <div class="block">
    <h3 style="color:white">Search Wiki</h3>
    <input class="form-control"  id="searchTerm">
    <button id="search" type="button" class="btn btn-primary">Search</button>
      </div>
  
  <div>
   <h1 class="text-center" style="color:white"> Results<br><br>
     <span id="results"></span>
  </div>
 </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/-Pey/wiki-viewer-oGvrdZ */
#container{
  width: auto;
  text-align: center;
  background-color: #0B3B24;
  margin: 10% auto;
}
html{
  width: auto;
  text-align: center;
  background-color: ;
  margin: auto;
}
#search{
  width: 100px;
  height: 45px;
  font-size: 20px;
  background-color:#071907;
  focus:outline: none;
 }

#searchTerm{
  width: 700px;
  margin: auto;
}
p{
  font-size: 25px;
}
a{
  color:#86B404;
  }
a:hover{
  color:#298A08;
}
a:visited{
  color:#21610B;
}

/*Downloaded from https://www.codeseek.co/-Pey/wiki-viewer-oGvrdZ */
$(document).ready(function(){
  
  $("#search").on("click", function(){
   var searchTerm = $("#searchTerm").val();
   var url="https://en.wikipedia.org/w/api.php?action=opensearch&search="+searchTerm+"&callback=?"
  $.ajax({
    type:"GET",
    url: url,
    async:false,
    dataType:"json",
    success:function(data){
   //console.log(data);
 for(var i = 0; i < 10; i++){
   $("#results").append('<a href='+data[3][i] +' target="-blank "> ' + data[1][i] +'</h1></a><h3>'+ data[2][i] +'</h3><br>');
 }
  },
  error: function(errorMessage){
    alert("Error");
  },
  })
  }) 
 
  $("#searchTerm").bind("keypress", function(p){
    if(p.keyCode == 13){
    $("#search").click();
    }  
  })
  })

Comments