Skip to content

Instantly share code, notes, and snippets.

@mohamma548

mohamma548/Wikipedia viewer.markdown

Created June 11, 2016 09:25
Show Gist options
  • Save mohamma548/4519151231e3defe6a6dddd9ddf85dc2 to your computer and use it in GitHub Desktop.
Save mohamma548/4519151231e3defe6a6dddd9ddf85dc2 to your computer and use it in GitHub Desktop.
Download ZIP
Wikipedia viewer
Raw
index.html
<html>
<body>
<div class= "container">
<div class="bg-block"><p>Wikipedia Viewer</p>
<div class="row">
<div class="col-sm-9"><input type="text" id="search"><br><button class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Search</button></div>
<div class="col-sm-3 wiki"><a href="https://en.wikipedia.org/wiki/Special:Random" target =_blank><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTk1hFJxZi8PsLLeVy5WFpfzY3yjsFfrE-Hbh7TY-i-g99BzEKN">Random Article</a></div>
</div>
</div>
<div class="display_Zone">
<ul class="headers"></ul>
</div>
</div>
</body>
</html>
Raw
script.js
//the user start to search any word by
//writing on the input form
//user can generate random wikipedia article
//by clicking the wikipedia image
$("document").ready(function(){
$(".btn").click(function(){
wikiViewer();
});
});
function wikiViewer(){
// taking input value
var searchArticle = $("#search").val();
//$(".headers").text(searchArticle);
$.ajax({
type:"GET",
url:'https://en.wikipedia.org/w/api.php?action=opensearch&search= '+searchArticle+'&format=json&callback=?',
dataType: "json",
success: function(data){
// display links as well as the description
//of the word to be searched
//using a loop we iterate all the words
//and links related to the input
for(var i=0;i<data[1].length;i++){
$(".headers").prepend('<li><a href='+data[3][i]+'>'+data[1][i]+'</a><p>'+data[2][i]+'</p></li>');
}
//console.log("hello world");
},
error: function(errorMessage){
$(".headers").text("try again an error has happened!");
}
});
}
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Raw
style.css
body{
background-image:url('https://www.dropbox.com/s/j6ifd2kbf9lmi0k/backgroundimage-wiki.jpg?dl=1');
}
.bg-block{
background-color:#EAF5F3;
text-align:center;
font-family: lobster;
margin:40px;
padding:10px;
}
.bg-block p {
text-shadow: 3px 3px 2px black;
font-size:60px;
}
input {
width: 100%;
margin: 10px 0px;
padding: 7px;
border-radius: 5px;
font-size: 16px;
}
.wiki{
font-size:20px;
}
.display_Zone {
background-color:#EAF5F3;
text-align:left;
font-family: lobster;
margin:0px 40px ;
padding:10px;
}
.headers{
font-size:25px;
color: black;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Raw
Wikipedia viewer.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment