Skip to content

Instantly share code, notes, and snippets.

@dsuryas

dsuryas/index.html

Created September 4, 2017 13:16
Show Gist options
  • Save dsuryas/426ed517cff6003b3d580227de3f3985 to your computer and use it in GitHub Desktop.
Save dsuryas/426ed517cff6003b3d580227de3f3985 to your computer and use it in GitHub Desktop.
Download ZIP
wikiviewer
Raw
index.html
<html>
<head>
<title>Wiki viewer</title>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Wiki Viewer</h1>
<div id="dash"><p>Get wiki articles from here</p></div>
<div id="me">by @deepakSuryas</div>
<!--<input class="form-control" id="searchTerm" />-->
<input type="text" id="searchTerm" class="textfield">
<button id="search" type="button" class="btn">Submit</button>
<button class="btn" id="random" type="button"><a href="https://en.wikipedia.org/wiki/Special:Random" target="blank">Random</a></button>
<ul id="output">
</ul>
</div>
</body>
</html>
Raw
script.js
$(document).ready(function(){
//when search is clicked below code runs
$("#search").click(function(){
//gets search input
var searchTerm = $('#searchTerm').val();
//API url with searchTerm
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search="+searchTerm+"&format=json&callback=?";
//ajax call
$.ajax({
type: "GET",
url: url,
async: false,
dataType: "json",
success: function(data){
$("#output").html(''); //this works like a clrscr(); i.e., clears the previous output
for(var i=0; i < data[1].length; i++){
$("#output").prepend("<li><a href="+data[3][i]+">"+data[1][i]+"</a><p>"+data[2][i]+"</p></li>");
}
//clear the search field after the search is done
$("#searchTerm").val('');
},
error: function(errorMessage){
alert("Better check your code chick!");
}
});
});
$("#searchTerm").keypress(function(e){
if(e.which == 13){
$("#search").click();
}
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Raw
style.css
body{
font-family: helvetica;
font-size: 40px;
background-color: #1DE9B6;
color: #4A148C;
}
h1{
font-family: 'Libre Barcode 39 Text', cursive;
font-size: 60px;
}
#dash{
font-family: 'Libre Barcode 39 Text', cursive;
}
#me{
font-size: 18px;
}
a{
text-decoration: none;
color: #4A148C;
}
.btn{
width: 400px;
height: 40px;
background-color: #1DE9B6;
border-radius: 0px;
font-family: monospace;
border-bottom: 2px solid #4A148C;
margin: 10px;
margin-left: 100px;
}
.textfield{
width: 100%;
border: 2px solid #4A148C;
border-top: 0px;
border-right: 0px;
border-left: 0px;
boder-radius: 0px;
margin-top: 10%;
#background-color: #1DE9B6;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment