Created
January 27, 2017 05:48
-
-
Save CSENoni/a5e0dcf553196039a124586bc75790b3 to your computer and use it in GitHub Desktop.
Wikipedia Viewer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<h1>Wikipedia Viewer</h1> | |
<div class="subcontainer"> | |
<input type="text"> | |
<div class="ssubcontainer"> | |
<button id="search">Search</button> | |
<button id="random">Random Search</button> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function() { | |
// show the list of the recommended terms | |
$("input[type='text']").autocomplete({ | |
source: function(req, res) { | |
$.getJSON("https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=" + req.term + "&callback=?", function(data) { | |
res(data[1]); | |
}); | |
}, | |
select: function(event, ui) { | |
getData(ui.item.value, event, 1); | |
}, | |
delay: 0 | |
}); | |
// get the real data by the information provided by input | |
// and show the list when press enter | |
$("input[type='text']").on("keypress", function(event) { | |
getData($(this).val(), event, 0); | |
}); | |
// or search button | |
$("#search").on("click", function(event) { | |
getData($("input[type='text']").val(), event, 1); | |
}); | |
// this button is for random search | |
$("#random").on("click", function() { | |
window.open("https://en.wikipedia.org/wiki/Special:Random", "_blank"); | |
}); | |
}); | |
// this is for showing the result of searching on the screen | |
function showDataOnScreen(data) { | |
// prefer remove but doesn't work well with autocomplete so just clean the ul | |
$("ul").html(""); | |
$(".container").css("margin-top", "0"); | |
// Create element and make some necessary attribute for them | |
var ulist = document.createElement("ul"); | |
var keys = Object.keys(data.query.pages); | |
keys.forEach(function(key) { | |
var list = document.createElement("li"); | |
var link = document.createElement("a"); | |
link.setAttribute("href", "http://en.wikipedia.org/?curid=" + key); | |
link.setAttribute("target", "_blank"); | |
var title = document.createElement("h3"); | |
var sum = document.createElement("p"); | |
var cont1 = document.createTextNode(data["query"]["pages"][key]["title"]); | |
var cont2 = document.createTextNode(data["query"]["pages"][key]["extract"] + ".."); | |
// officially put each of the element into each other (in a proper way) | |
title.appendChild(cont1); | |
sum.appendChild(cont2); | |
link.appendChild(title); | |
list.appendChild(link); | |
list.appendChild(sum); | |
ulist.appendChild(list); | |
}); | |
document.body.appendChild(ulist); | |
} | |
// this is for getting the json to manipulate the data we needed | |
function getData(keyword, event, clicked) { | |
$.getJSON('https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&titles=&generator=search&exsentences=max&exlimit=20&exintro=1&explaintext=1&excontinue=&gsrsearch=' + keyword + '&callback=?', function(data) { | |
if (event.which === 13 && clicked === 0) { | |
showDataOnScreen(data); | |
} | |
if (clicked === 1) { | |
showDataOnScreen(data); | |
} | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.container { | |
margin: 0 auto; | |
margin-top: 200px; | |
} | |
.subcontainer{ | |
margin: 0 auto; | |
padding: 0; | |
width: 50%; | |
text-align: center; | |
} | |
.ssubcontainer { | |
margin: 10px auto; | |
} | |
.ui-autocomplete { | |
position: absolute; | |
cursor: pointer; | |
background: white; | |
} | |
.ui-menu { | |
list-style:none; | |
padding: 2px; | |
margin: 0; | |
display:block; | |
float: left; | |
} | |
.ui-state-focus { | |
color: white; | |
background: steelblue; | |
outline:none; | |
} | |
#search, #random { | |
border: none; | |
padding: 3%; | |
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); | |
cursor: pointer; | |
margin: 1%; | |
font-weight: bold; | |
} | |
#search:hover, #random:hover { | |
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3); | |
} | |
h1 { | |
text-align: center; | |
margin: 20px auto; | |
font-family: monospace; | |
color: steelblue; | |
font-size: 48px; | |
font-weight: bold; | |
} | |
input[type="text"] { | |
display: block; | |
margin: 0 auto; | |
width: 100%; | |
font-size: 28px; | |
} | |
ul li { | |
list-style: none; | |
} | |
ul li a { | |
text-decoration: none; | |
color: steelblue; | |
font-size: 28px; | |
display: inline-block; | |
height: 0; | |
} | |
ul li a:hover { | |
text-decoration: underline; | |
color: black; | |
} | |
.ui-autocomplete { | |
box-shadow: 0 0 3px rgba(0,0,0,0.3); | |
} | |
.ui-helper-hidden-accessible { | |
display: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment