renx777
12/30/2017 - 1:25 PM
wiki viewer
wiki viewer
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
body{
height:100%;
width:100%;
background-color:#3F2860;
font-family:Josefin Slab,serif;
}
h1{
color:white;
text-align:center;
;
}
.container{
background-color:#80628B;
margin-top:10px;
font-size:20px;
color:white;
}
input{
font-size:30px;
width:0px;
height:40px;
visibilty:hidden;
color:black;
border:0px solid transparent;
transition:0.1s;
margin-bottom:20px;
background-color:#665BC4;
}
.x{
width:200px;
height:45px;
transition:0.1s;
background-color:white;
border:5px solid #3F2860;
visibility:initial;
}
html, body{height:100%; margin:0;padding:0}
.container-fluid{
margin-top:50px;
display:table;
}
.row-fluid{ display:table-cell; vertical-align: middle;
background-color:#665BC4;}
.centering {
float:none;
margin:0 auto;
}
.fa{
color:white;
margin-top:10px;
cursor:pointer;
}
.fa-search{
float:right;
}
a{
font-size:30px;
font-style:bold;
color:white;
background-color:#3F2860;
}
a:hover{
color:yellow;
}<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
$(document).ready(function () {
function getWiki() {
// on press of enter,get the value typed in the input
$('input').toggleClass('x')
$('#result').empty();
var fd = $('#d').val()
// call wiki api with input serach
$.getJSON('https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=20&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=' + fd + '&callback=?', function (data) {
console.log(data.query.pages)
var obj = data.query.pages;
// going through response data,to make it presentable for our application
for (var key in obj) {
console.log(key)
$('#result').append('<div class="container">' +
'<div class="row"><div class="col-md-12">' +
'<a href=https://en.wikipedia.org/?curid=' + key + '>' + obj[key].title + ':</a>' +
'</div></div>' +
'<div class="row"><div class="col-md-12">' +
'<p>' + obj[key].extract + '</p></div></div></div>');
$('a').attr('target', '_blank')
$('#d').val("")
}
})
}
$('#d').keypress(function (e) {
if (e.keyCode == 13) {
getWiki()
}
});
$('.fa-search').on('click', function () {
getWiki()
})
// get random article from wikpedia
$('.fa-random').on('click', function () {
var win = window.open('https://en.wikipedia.org/wiki/Special:Random', '_blank')
win.focus();
})
})<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>wikiViewer</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>
</script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid"><div class="col-md-12">
<h1>Wiki Viewer</h1>
<i class="fa fa-random fa-3x" data-toggle="toottip" title="Click to read a random article"></i>
<input id="d" type="text">
<i class="fa fa-search fa-3x"></i>
<br>
</input>
</div></div></div>
<div id="result"></div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>