wikipedia

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>wikipedia</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 class="container">
  <h1>Wikipedia Viewer!!!</h1>
  <h4>Free Code Project</h4>
  <a href=https://en.wikipedia.org/wiki/Main_Page target="blank">
    <img src =https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRE7pz-hmpo-tc03U9r1iEIWiJOQwbTFi_0vjXIJkHFP3m0Qr08jQXWJeEj width="400" height="400"></a>
  <br> </br>
  
  <input class="form-control" id="searchTerm"><br>
  <button id="search" type="button" class="btn btn-primary">Submit</button>
  <ul id ="output">
      </ul>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/dasriya/wikipedia-egWqEp */
.container {
  max-width: 750px;
}
h1 {
  font-family: 'Rock Salt', cursive;
}
h4 {
  margin: 25px;
  font-family: 'Rock Salt', cursive;
}


/*Downloaded from https://www.codeseek.co/dasriya/wikipedia-egWqEp */
$(document).ready(function(){
$("#search").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){

//console.log(data[1][0]);
  //console.log(data[2][0]);
  //console.log(data[3][0]);
  
  for(var i=0;i<data[1].length;i++){
      
    $('#output').prepend("<li><a href= "+data[3][i]+">"+data[2][i] +"</a></p>"+data[1][i]+"</p></li>");
      }
  
},
error:function(errorMessage){

alert("Error");
}

});


});


});

Comments