<body>
<div class='page container-fluid'>
<div id='header'>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#top">Wiki Viewer</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#top">Home</a></li>
<li><a href="#page20">Mid-Returns</a></li>
<li><a href="#page41">42nd result</a></li>
<!-- <li><a href="https://en.wikipedia.org/wiki/Special:Random" target ="blank">random</a></li> </-->
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://en.wikipedia.org/wiki/Special:Random" id='toggle' target="blank">random <span class="glyphicon glyphicon-heart"></span></a></li>
<li>
<a href="https://codepen.io/TurtleWolf/"><img src="https://gravatar.com/avatar/5c967c3a73637f892dc9d0af94efc3f6?s=80&d=https://codepen.io/assets/avatars/user-avatar-80x80-bdcd44a3bfb9a5fd01eb8b86f9e033fa1a9897c3a15b33adfc2649a002dab1b6.png" alt="Smiley face" height="30" width="30"></a>
</li>
</ul>
</div>
</nav>
</div>
<a name="top"></a>
<div class='spacer'></div>
<div class='block'>
<h1 class='text-center'><span id='currentTemp'>Wikipedia Search</span></h1>
<p align="left">
<input class="form-control" id="searchTerm">
<button id='search' type='button' class='btn btn-primary'>Search</button>
</p>
</div>
<div class='spacer'></div>
<a name="page1"></a>
<div class='block'>
<h1 class='text-center'><span id='currentTemp'>Search Results</span></h1>
<p align="left" id='output'>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from </p>
</div>
<div class='spacer'></div>
</div>
<div class="navbar navbar-fixed-bottom">
<a href="https://twitter.com/JonPohlner" class="twitter-follow-button" data-show-count="false">Follow</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<!-- link to My twitter account "floating Footer"-->
</body>
.block{
background-color:black;
opacity:.75;
color:white;
padding: 50px;
width:75%;
margin-right:auto;
margin-left:auto;
border-radius:15px;
font-size:1.5em;
padding-bottom:2%;
}
.spacer{
padding: 4%;
}
body{
background:no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
$(function() {
var backgroundImg = [
'https://s-media-cache-ak0.pinimg.com/originals/59/00/21/59002191add037fe585a04880fa92549.png',
'http://www.pixelstalk.net/wp-content/uploads/2015/12/kansai-new.jpg'
]; //Add more backgrounds to the array
$('body').css('background-image', 'url(' + backgroundImg[0] + ')'); //allows a variable for changing background img based in an array, change number in [] to change background...
$('#search').click(function() {
var searchTerm = $('#searchTerm').val();
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&limit=42&search=" + searchTerm + "&callback=?"
$.ajax({ //ajax call for JSON data see console log data wiki API method for retreiving data, doesn't automatically spit back JSON without an AJAX call
type: "GET",
url: url,
async: false,
dataType: "json",
success: function(data) {
// console.log(url);
// console.log(data[1][0])//search term
// console.log(data[2][0])//search description, 1st result
// console.log(data[3][0])//address of 1st result
$('#output').html(''); //clears all data prior to running/re-running for loop
for (var i = 0; i < data[1].length; i++) {
$('#output').append("<a name='page" + i +"' href=" + data[3][i] + " target='blank'><h1>" + data[1][i] + "</h1></a>" + "<h3>" + data[2][i] + "</h3><br>");
}
},
error: function(errorMessage) {
alert("Error");
},
});
});
});
