Skip to content

Instantly share code, notes, and snippets.

Created May 28, 2016 00:56
Show Gist options
  • Select an option

  • Save anonymous/7550c9e5238abe3da65d79110ed9a336 to your computer and use it in GitHub Desktop.

Select an option

Save anonymous/7550c9e5238abe3da65d79110ed9a336 to your computer and use it in GitHub Desktop.
Wikepdia viewer
<body>
<div class="jumbotron">
<div class="page-header img-responsive"><h1 class="text-center">Wikiedepia Page Viewer<br>
<small>A pen by Craig A. </small></h1></div>
<div class="text-center "><input class="inputText"></input><br>
<button class="btn-primary btn" >Search Wiki!</button>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="well"><h5 class="searchTitles"></h5><br>
<h6 class="contentOfTitle"> </h6>
</div>
</div>
</div>
</body>
$('.btn').click( function(){
search();
});
function search(){
var searchTitle=$(".inputText").val();
$.ajax({
url:"//en.wikipedia.org/w/api.php",
data: {
action:'query',
list:'search',
srsearch: searchTitle,
format:'json',
},
dataType:'jsonp',
success:function(data){
var html="";
for(var x=0;x<10;x++){
//console.log(data);
/*create variable for html div */
html+="<div class='well'>";
//append html to div class
html+="<h5><a href='https://en.wikipedia.org/wiki/"+data.query.search[x].title.toString()+"'>"+data.query.search[x].title+"</a></h5>"
html+="<p>"+data.query.search[x].snippet+"</p>"
html+="</div>"
$('.searchTitles').html(html);
} ;
}
});
};
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
.jumbotron{
margin-bottom:0; background:url("https://static.pexels.com/photos/6550/nature-sky-sunset-man-large.jpeg") no-repeat center center;
background-size:100% 100%;
height:400px;
width:100%;
}
.page-header{
border-bottom:0px;
}
.inputText{
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
padding: 10px 20px;
border: 1px solid #b7b7b7;
-webkit-border-radius: 3px;
border-radius: 3px;
font: normal 16px/normal "atomic-age", Helvetica, sans-serif;
color: rgba(0,142,198,1);
-o-text-overflow: clip;
text-overflow: clip;
background: -webkit-linear-gradient(-90deg, rgba(137,163,86,1) 0, rgba(124,188,10,1) 100%);
background: -moz-linear-gradient(180deg, rgba(137,163,86,1) 0, rgba(124,188,10,1) 100%);
background: linear-gradient(180deg, rgba(137,163,86,1) 0, rgba(124,188,10,1) 100%);
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
-webkit-box-shadow: 231px 6px 15px 0 rgba(0,0,0,0.2) inset;
box-shadow: 231px 6px 15px 0 rgba(0,0,0,0.2) inset;
text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
color:white;
}
.contentOfTitle{
margin:0;
padding:0;
}
searchTitle{
margin:0;
padding:0;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment