Skip to content

Instantly share code, notes, and snippets.

@HuangStanley050

HuangStanley050/index.html

Created December 2, 2017 11:44
Show Gist options
  • Save HuangStanley050/d5ecc3e7a65dcffdbe012280afd05c1e to your computer and use it in GitHub Desktop.
Save HuangStanley050/d5ecc3e7a65dcffdbe012280afd05c1e to your computer and use it in GitHub Desktop.
Download ZIP
Wikipedia viewer API
Raw
index.html
<body>
<div class="containter-fluid">
<h1 class="text-center">Wikipedia Viewer</h1>
<a target="_blank" href="https://en.wikipedia.org/wiki/Special:Random" role="button" class="btn btn-info center-block">Random Article</a>
<br>
<br>
<form onsubmit="return ClickEvent();">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" id="test" >
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
<br>
<br>
<div id="spot"></div>
</div>
</body>
Raw
script.js
/***Lesson learned: after submit form, page reloads, have to return false!!!!***/
//or do something other than form and be careful of page reload
//var test_str = "Tom Brady";
//var search_str = "https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139"
/*var wiki_str = "https://en.wikipedia.org/w/api.php?action=opensearch&search="+test_str+"&limit=5&format=json&callback=?";
*/
//use jsonfm to display data in browser to easy to read for human
//$("button").click(function(){
//get the input once the button is clicked
//put '+' in between spaces for search
/*var dummy = $("#test").val();
var search = dummy.split(" ").join("+");
console.log(search);
//console.log(dummy+"2");
//use getJSON to fetch data from wikipedia API
$("#spot").hide();*/
//});
/*$.getJSON("https://en.wikipedia.org/w/api.php?action=opensearch&search="+search+"&limit=5&format=json&callback=?", function(data) {
//console.log(dummy);
console.log(data[3][0]);
});*/
function wiki_api(val) {
$.getJSON("https://en.wikipedia.org/w/api.php?action=opensearch&search="+val+"&limit=5&format=json&callback=?", function(data) {
//console.log(search+"2");
//console.log("runs")
/*console.log(data[1].length);
$("#spot").html("<h1>"+data[1][0]+"</hi>");
$("#spot").append("<p>"+data[2][0]+"</p>");*/
console.log(data[3][0]);
for ( var i = 0; i < data[1].length; i++) {
$("#spot").append("<h1>"+data[1][i]+"</h1>");
/*$("#spot").append('<a target=_blank href="#"'+"<p>"+data[2][i]+"</p>"+"</a>");*/
$("#spot").append("<a target=_blank href=\""+data[3][i]+"\""+"<p>"+data[2][i]+"</p>"+"</a>"); //--->
//double quote surround a variable above example with data[3][i]//
}
});
}
function ClickEvent() {
//var temp;
//console.log("before");
var dummy = document.getElementById("test").value;
var search = dummy.split(" ").join("+");
//console.log(search);
wiki_api(search);
//console.log("ran");
return false;
}
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Raw
style.css
body {
background-color: lightblue;
}
h1 {
font-family: serif;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment