-Search Wikipedia Entries -Go to random Wikipedia articles
A Pen by Matthew Relph on CodePen.
Created
July 19, 2019 15:55
-
-
Save mattrelph/ab7d2d2560f3cec2b803725aae240c0b to your computer and use it in GitHub Desktop.
Wikipedia Viewer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(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"); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Wikipedia Viewer | |
| -Search Wikipedia Entries -Go to random Wikipedia articles | |
| A Pen by Matthew Relph on CodePen. | |
| License. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment