Skip to content

Instantly share code, notes, and snippets.

@csuszka
Last active Apr 10, 2018
Embed
What would you like to do?
Wikipedia Viewer
<div id = "top">
<H1 id="title"> Wikipedia Viewer</H1>
<form action="">
<input required type="text" placeholder=" I'm looking for..." id = "requestField" >
<button id = "requestButton" type="button"> Search </button>
</form>
<!-- SUBMIT tpe buttons send request to your backend. If you use SUBMIT type button here at the same time with the ajax request, you will get an error. I thought it is a CORS error, but no, the page refreshing was in the way of the ajax request (type SUBMIT was automatically given by the browser to the button). Use SUBMIT buttons only when you have to (when you are not using javascript) -->
<br/>
<button id = "random">Go random!</button>
</div>
<div id = "resultField"></div>
$(document).ready(function() {
var searchById = "";
var julie = function() {
var searchTerm = $("#requestField").val();
var searchLink =
"https://en.wikipedia.org/w/api.php?action=query&srsearch=" +
searchTerm +
"&list=search&format=json&formatversion=2";
$.ajax(searchLink, {
type: "GET",
dataType: "json",
data: {
origin: "*"
},
success: function(searchResult) {
$(resultField).html("");
$.each(searchResult.query.search, function(propertyName, value) {
var articleExtract = value.snippet.replace.slice(0,150);
console.log(articleExtract);
$("#resultField").append(
"<a target = _blank href = https://en.wikipedia.org/wiki/" +
encodeURIComponent(value.title) +
'><div class = "container"> <H1>' +
value.title +
"</H1> <br/>" +
articleExtract +
"</div></a>"
);
});
},
error: function(whatever) {
console.log("Scully, you're not gonna believe this!", whatever);
}
});
};
$("#requestButton").on("click", julie);
//pass julie
$("form").keypress(function(event) {
if (event.which == 13) {
event.preventDefault();
julie();
//calling julie ("JULIE! DO THE THING!")
}
});
//RANDOM START - First, we get the ids
$("#random").on("click", function() {
$.ajax(
"https://en.wikipedia.org//w/api.php?action=query&list=random&format=json&rnnamespace=0&rnlimit=10",
{
type: "GET",
dataType: "json",
data: {
origin: "*"
},
success: function(searchResult) {
var idString = "";
$.each(searchResult.query.random, function(propertyName, value) {
idString += value.id + "|";
});
idString = idString.slice(0, idString.length - 1);
searchById =
"https://en.wikipedia.org//w/api.php?action=query&prop=extracts&exintro=true&format=json&list=&pageids=" +
idString;
//From the ids we are doing another search for the titles & contents
$.ajax(searchById, {
type: "GET",
dataType: "json",
data: {
origin: "*"
},
success: function(searchResult) {
$("#resultField").html("");
console.log(searchById);
$.each(searchResult.query.pages, function(propertyName, value) {
$("#resultField").append(
"<a target = _blank href = https://en.wikipedia.org/wiki/" +
encodeURIComponent(value.title) +
'><div class = "container"> <H1>' +
value.title +
"</H1> <br/>" +
value.extract +
"</div></a>"
);
});
},
error: function(whatever) {
console.log("Scully, you're not gonna believe this!", whatever);
}
});
}
}
);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
#top{
padding: 30px;
text-align: center;
}
#title{
padding: 30px;
}
#resultField{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-gap: 1em;
grid-auto-rows: 250px;
text-overflow: ellipsis-word;
overflow: hidden;
white-space: normal;
}
.container {
font-weight: normal;
text-decoration: none;
}
.container b {
font-weight: normal;
}
a {
text-decoration: none;
outline: none;
padding: 1em;
}
a:link {
background: lightgrey;
color: black;
}
a:visited {
background: grey;
color: black;
}
a:focus {
border-bottom: 2px solid;
background: white;
color: black;
}
a:hover {
background: white;
color: black;
text-decoration: none;
}
a:active {
background: grey;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment