I am trying to build the wikipedia reader project,here’s what I have got so far (I have done it partially,so check the console for the outputs)
https://codepen.io/subhan95/full/VmKbYR/
While the code works on codepen , it does not do so on my computer(Ubuntu 14.04).Does anyone have any idea why?
Here’s how I do it on computer
(wikireader.html)
<!DOCTYPE html>
<html>
<head>
<title>Wikipedia Reader</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="custom.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="source.js"></script>
</head>
<body>
<div class="container-fluid text-center" style="min-height: 95%;">
<div class="row">
<!-- <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"></div> -->
<div class="col-xs-4 col-xs-offset-4 text-center">
<br>
<br>
<form action="">
<input id="search-box" type="text" placeholder="search" required>
<br>
<br>
<button id="submit-btn" class="btn btn-default btn-md" type="submit">Search</button>
</form>
<br>
<br>
<button type="button" id="random-article" class="btn btn-default btn-lg">Random Article</button>
</div>
<!-- 'https://en.wikipedia.org/wiki/Special:Random' -->
<!-- <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"></div> -->
</div>
</div>
</body>
</html>
(custom.css)
body {
background-color: #151A4F;
color: #8122D4;
font-family: 'Roboto Condensed',sans-serif;
}
.btn-default ,
.btn-default:hover,
.btn-default:focus,
.btn-default:active:focus {
border-color: #8122D4;
background-color: #8122D4;
color: white;
box-shadow: none;
outline: none;
}
(source.js)
function getList(query) {
$.ajax({
url:"https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&origin=*&srsearch="+query,
success: function(json){
console.log(json);
},
error: function(errorMessage) {
console.log('error');
console.log("https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch="+query);
},
dataType: "json"
});
}
$(document).ready(function() {
$("#random-article").on("click",function() {
window.open('https://en.wikipedia.org/wiki/Special:Random');
});
$("#submit-btn").on("click",function() {
var value = $("#search-box").val();
if (value==='') {
alert("enter something into searchbox");
}
else {
getList(value);
}
});
});