Skip to content

Instantly share code, notes, and snippets.

@giannispan
Created July 14, 2016 05:18
Show Gist options
  • Save giannispan/9acdadb40b057f6fda4593a6cb608fe6 to your computer and use it in GitHub Desktop.
Save giannispan/9acdadb40b057f6fda4593a6cb608fe6 to your computer and use it in GitHub Desktop.
wikipedia viewer
body {
background-color: #999;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.btn {
margin-top:5px;
}
<body>
<div class="container">
<div class="row">
<h1>
Wikipedia Viewer
</h1>
<h2>
</h2>
<div class="form-group">
<div class="col-xs-4">
<p>Search Wikipedia for an article or click the "random" button for a random entry</p>
<input type="text" class="form-control" id="input">
</div>
<div class="form-group">
<div class="col-xs-12">
<button id="searchButton" class="btn btn-success">Search</button>
<a id="myTwitter" class="btn btn-info" href="http://en.wikipedia.org/wiki/Special:Random" target="_blank"><i class="fa fa-twitter"></i> Random</a>
</div>
</div>
</div>
</div>
<div class="row">
<div id="wiki-container">
<h3>Wikipedia Links</h3>
<ul id="wiki-links">
</ul>
</div>
</div>
</div>
</body>
$(document).ready(function(){
$('#searchButton').click(function(evt){
evt.preventDefault();
var result = "";
$("#wiki-links").empty();
var input = document.getElementById("input").value;
var url = 'http://en.wikipedia.org/w/api.php?action=query&format=json&prop=info&callback=?&generator=search&gsrsearch='+input+'';
var link = "http://en.wikipedia.org/?curid=";
$.getJSON(url, function(data) {
var result = data.query.pages;
jQuery.each(result, function(i, val) {
$("#wiki-links").append("<li><a target="+"_blank"+" href="+link+val.pageid+">"+val.title+"</a></li>");
});
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment