<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");

      },

    });

  }); 
  
  
});

  

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js