Wikipedia Viewer

index.html

<div id="outerbox" class="container-fluid text-center">
	<!-- <div class="row">
		<div class="col-xs-2 text-center">
		</div>
		<div id="lefty" class="col-xs-4 text-center">
		</div>
		<div id="righty" class="col-xs-4 text-center">
	
		</div>
		<div class="col-xs-2 text-center">
		</div>
	</div>
	<div class="row">
		<div class="col-xs-2 text-center">
		</div>
		<div class="col-xs-4 text-center">
		</div>
		<div class="col-xs-4 text-center">
		</div>
	</div>
	-->
</div>
<footer>
  <p class="small text-center">Coded by Matthew Relph</p>
</footer>
<nav id="menubar" class="navbar navbar-fixed-bottom navbar-inverse bg-inverse">
  <div id="header" class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#MyNavBar" aria-expanded="false" role="navigation">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img  class="img-thumbnail img-responsive" src="https://thecablecloset.com/not_used/initial_brand-tiny.png"</a>
    </div><!-- /.navbar-header -->

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="MyNavBar">
		<ul class="nav navbar-nav navbar-right">
			<li class="nav-item"><a class="nav-link white-text text-right" title="Random Link"  href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Goto Random Wikipedia Article</a></li>
		</ul>
		<form class="navbar-form navbar-left">
		  <div  class="form-group">
			<input id="searchString" type="text" class="form-control" placeholder="Search Wikipedia">
		  </div>
		  <button id="searchButton" type="button" class="btn btn-default">Search</button>
		</form>	  
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

script.js

$(document).ready(function(){
	$('#searchButton').click(function() {

		//console.log("This search string:" , $('#searchString').val());
		searchWiki();

	});
	
	$('#searchString').keypress(function (e) {
		if(e.which == 13)
		{

			//console.log("This search string:" , $('#searchString').val());
			searchWiki();
			return false;
		}
	});
	
	
	$( document ).ajaxError(function( event, request, settings ) {
		console.log("Error requesting page " + settings.url );
	});	
}); 

function searchWiki()
{
	$.ajax({
		type: "GET",
		url: 'https://en.wikipedia.org/w/api.php',
		data: 
		{
			"action": "query",
			"format": "json",
			"list": "search",
			"continue": "",
			"srsearch": $('#searchString').val(),
			"srwhat": "text",
			"srprop": "snippet"
		},
		dataType: 'jsonp',
		complete: function(){
			console.log("Complete: ", this.url);				 
		},
		success: processResult
	});	
}


function processResult(apiResult)
{
	$('#outerbox').empty();
	//console.log("This is the result ", apiResult);
	for (var i = 0; i < apiResult.query.search.length; i++)
	{
		$('#outerbox').append('<div class="externalWiki" onclick="getWiki(' + apiResult.query.search[i].pageid + ')"><span class="h3 text-right spacer"><i class="fa fa-external-link-square" aria-hidden="true"></i></span><h3>'+apiResult.query.search[i].title + ' </h3></br>' +apiResult.query.search[i].snippet +  '</div>');
	}
	window.scrollTo(0, 0);
} 


function getWiki(pageID) 
{
	//console.log("Div #", pageID, " clicked");
	var linkAddress="http://en.wikipedia.org/?curid=" + pageID;
	window.open(linkAddress,"_blank");
}

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>

style.css

body {
  background-color: LightBlue;
  margin-top: 65px;
  font-family: "Courier", "monospace";
}

footer {
  margin-top: 65px;
  background-color: Black;
  color: White;
  height: 100px;
  width: 100%;
}

.externalWiki{
  background-color: White;
  color: Black;
  text-align: left;
  width: 75%;
  margin: 15px;
  padding: 10px;
  border-radius: 10px;
}

.spacer{
  float: right;
  width: 100%;  
}
#outerbox {
  min-height: 800px;
  width: 100%;
  color: White;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

Wikipedia Viewer

Wikipedia Viewer
-Search Wikipedia Entries -Go to random Wikipedia articles

A Pen by Matthew Relph on CodePen.

License.

wikipedia-viewer.markdown

Wikipedia Viewer

-Search Wikipedia Entries -Go to random Wikipedia articles

A Pen by Matthew Relph on CodePen.

License.