Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Wikipedia Viewer
<div class="container">
<div class="row title">
<div class="col-md-12 panel-group">
Wiki View
</div>
</div>
<div class="row searchBar">
<div class="col-md-12 panel-group">
<div class="input-group">
<input type="text" class="form-control" id="searchTerm" placeholder="Search Wikipedia for...">
<span class="input-group-btn">
<button id="search" class="btn btn-default" type="button">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</span>
<span class="input-group-btn">
<button class="btn btn-default" type="button"><a href="https://en.wikipedia.org/wiki/Special:Random" target="blank">Surprise Me</a></button>
</span>
</div>
<ul id="output">
</ul>
</div>
</div>
$(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){
// Get heading console.log(data[1][0]);
//Get description console.log(data[2][0]);
// Get link console.log(data[3][0]);
$('#output').html('');
for(var i=0; i < data[1].length; i++){
$('#output').append("<li><a href="+data[3][i]+" target='_blank'>"+data[1][i]+"</a><p>"+data[2][i]+"</p></li> ");
}
//Clears the search bar
$("#searchTerm").val('');
},
error: function(errorMessage){
alert("Error");
}
});
});
$("#searchTerm").keypress(function(e){
if(e.which==13){
$("#search").click();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
.row {
text-align: center;
}
.title {
font-family: 'Special Elite', cursive;
font-size: 75px;
margin-top: 1em;
}
.searchBar {
max-width: 730px;
}
.searchBar input {
border: 2px solid #555;
}
.searchBar input:focus {
border: 2px solid #000;
}
.btn {
border: 2px solid #000;
margin-left: 3px;
margin-right: 3px;
}
.btn a {
text-decoration: none;
color: #000;
}
ul {
list-style: none;
text-align: left;
margin: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment