Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Built a Wikipedia Viewer
<div class="container" style="max-width: 750px;">
<div class="row" id="header">
<div class="col-xs-12 text-center">
<h1> Wikipedia Viewer </h1>
<div class="form-inline">
<input type="text" id="searchText" class="form-control" placeholder="Alan Turing" />
<button id="btnSearch" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</div>
<br>
<a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">A random Wikipedia article</a>
</div>
</div>
<div class="container" id="contentResult">
<!--
<a href="" target="_blank">
<div class="pageItem col-xs-12">
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Einstein_1921_by_F_Schmutzer_-_restoration.jpg/114px-Einstein_1921_by_F_Schmutzer_-_restoration.jpg"
class=""/>
</div>
<div class="desc">
<h2>Albert Einstein</h2>
<p>
German-American physicist and founder of the theory of relativity
</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div class="pageItem col-xs-12">
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Einstein_1921_by_F_Schmutzer_-_restoration.jpg/114px-Einstein_1921_by_F_Schmutzer_-_restoration.jpg"
class=""/>
</div>
<div class="desc">
<h2>Albert Einstein</h2>
<p>
German-American physicist and founder of the theory of relativity
</p>
</div>
</div>
</a>
-->
</div>
<footer class="text-center">Coded by <a href="https://www.freecodecamp.com/thydev" target="_blank">Chanthy Ngin</a></footer>
</div>
$("document").ready(function(){
console.log("Page Ready");
//console.log($("#searchText").val());
$("#searchText").focus(); //Do not put this line when developing in codepen.io ---> So annoying
$("#searchText").change(function(){
//console.log($("#searchText").val());
var stxt = $("#searchText").val();
if(stxt.trim() != ""){
console.log("change" + stxt);
searchContent(stxt);
}
});
/*
$("#btnSearch").click(function(){
var stxt = $("#searchText").val();
if(stxt.trim() != ""){
console.log("click" + stxt);
searchContent(stxt);
}
});
*/
});
//https://www.mediawiki.org/wiki/API:Page_info_in_search_results
function searchContent(str) {
var searchText = "Alan tu";
//console.log(str);
searchText = str;
$.ajax({
url: '//en.wikipedia.org/w/api.php',
data: {
action: 'query',
formatversion: 2,
generator: 'prefixsearch',
gpssearch: searchText,
gpslimit: 10,
prop: 'pageimages|pageterms',
piprop: 'thumbnail',
pithumbsize: 100,
pilimit: 10,
wbptterms:'description',
redirects:'',
format: 'json'},
dataType: 'jsonp',
success: function (data) {
//console.log(data.query.pages);
var pages = data.query.pages;
loadList(pages);
}
});
}
function loadList(pages){
//https://en.wikipedia.org/?curid=xxxxxxx
var wikiURL = "https://en.wikipedia.org/?curid=";
$("#contentResult").html("");
pages.forEach(function(p){
var pHTML = '<a href="' + wikiURL + '#curid#" target="_blank">' +
'<div class="pageItem col-xs-12">' +
'<div style="">' +
'<img src="#imgURL#" class="hidden-xs"/>' +
'</div>' +
'<div class="desc">' +
'<h2>#title#</h2>' +
'<p>' +
'#desc#' +
'</p>' +
'</div>' +
'</div>' +
'</a>';
if(p.hasOwnProperty('pageid')) {
curid = p.pageid;
title = p.hasOwnProperty('title') ? p.title : "";
description = p.hasOwnProperty('terms') ? p.terms.description[0] : p.title;
imgURL = p.hasOwnProperty('thumbnail') ? p.thumbnail.source : "https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg";
pHTML = pHTML.replace("#curid#", curid)
.replace("#title#", title)
.replace("#imgURL#", imgURL)
.replace("#desc#", description);
$("#contentResult").append(pHTML);
}
//console.log(curid);
//console.log(title);
//console.log(description);
//console.log(imgURL);
});
}
/*
$.ajax({
url: '//en.wikipedia.org/w/api.php',
data: {
action: 'query',
list: 'search',
srsearch: 'Albert Ei',
prop: 'pageImages',
format: 'json' },
dataType: 'jsonp',
success: function (x) {
console.log(x);
//console.log(x.query.search);
//console.log('title', x.query.search[0].title);
}
});
*/
//api.php?action=query&generator=allpages&gaplimit=3&gapfrom=Ba&prop=links|categories
//https://en.wikipedia.org/w/api.php?action=query&formatversion=2&generator=prefixsearch&gpssearch=Albert%20Ei&gpslimit=10&prop=pageimages%7Cpageterms&piprop=thumbnail&pithumbsize=50&pilimit=10&redirects=&wbptterms=description
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
#header {
margin: 0 0 20px 0;
}
img {
width: 100px;
height:auto;
}
h2 {
margin: 5px 0 0 0;
/*display: inline-block; */
}
.pageItem {
padding: 0px;
margin: 0 0px 2px 0px;
border: 1px solid #eee;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #1b809e;
vertical-align: top;
display: -webkit-flex;
max-width: 700px;
background: #f2f2f2;
}
.pageItem:hover {
background: #fff2e6;
border-left-color: #ff7b00;
}
.desc {
margin-left: 10px;
}
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
h2 {
font-size: 1.3em;
}
<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
You can’t perform that action at this time.