Wikipedia Search Page

index.html

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
  
          </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav" id="top-nav">
        <li><a href="#">Wikipedia Search Page</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
      	<li><i class="fa fa-user-circle-o" aria-hidden="true"> Ryan Mills</i></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="jumbotron text-center">
	<div class="container">
		<h1>Wiki Search</h1>
		<p>Below type in the search bar what you would like to look up</p>
	</div>
</div>

	
    <div class="container text-center block">
	   
	    <div class="col-md-9">
        
	    
        
	    </div>
	    <div class="col-md-3">
	    		<input type="text" class="form-control"  id="searchTerm" placeholder="Search">
	     <button type="submit" id="search" class="btn btn-primary text-center">Submit</button>
	    </div>
    </div><br>

    <div class='block'>
      <h1 class='text-center'><span id='output'>Search Results<br><br></span>    </div>

script.js

$(document).ready(function() {
	
//"https://en.wikipedia.org/w/api.php?action=opensearch&search=billy&callback=?"

//var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&callback=?"

$('#search').click(function(event) {
	/* Act on the event */
	var searchTerm = $('#searchTerm').val();

	$.ajax({
		url: "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&callback=?",
		type: 'GET',
		async: false,
		dataType: 'json',
		success: function(data){
			//console.log(data[2][0]);
			//
		$('#output').html('');

		for(var i = 0; i <= 9; i++){
			$('#output').append('<a href=' + data[3][i] + ' target= "blank">' + data[1][i] +
			 '</h1></a><h3>' + data[2][i] + '</h3><br>');
		}

		},
		error:function(err){
			alert('Err');
		}
	
	});

});







//type enter on keyboard
$('#searchTerm').bind('keypress', function(e){
	if (e.keyCode == 13){
		$('#search').click();
	}
})







});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

style.css

body {
	background-image: url(http://www.innovaticias.com/userfiles/extra/TCKU_wikipedia.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	margin: 0;
	padding: 0;
}

.navbar {
	margin: 0;
	padding: 0;
}

nav li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jumbotron {
	background: #3498DB;
}

input {
	margin: 0;
}


.btn {
	margin-top: 20px;
}

.block {
    background-color: black;
    opacity: .9;
    color: white;
    padding: 50px;
    width: 75%;
    margin-right: auto;
    margin-left: auto;
    border-radius: 15px;
    font-size: 1.5em;
    padding-bottom: 2%;
  }

  a {
  	color: white;
  }

ul, li {
  list-style: none;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

wikipedia-search-page.markdown

Wikipedia Search Page

A Pen by Ryan Mills on CodePen.

License.