Created
July 22, 2016 06:25
-
-
Save chemok78/80200849c76d7645b175c85e61ba12bd to your computer and use it in GitHub Desktop.
Wikipedia Viewer
This file contains hidden or 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
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Wikipedia Viewer</title> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> | |
| <link href='https://fonts.googleapis.com/css?family=Work+Sans:400,500,600,700,800,900' rel='stylesheet' type='text/css'> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1 class="text-center" style="color: white;">Wikipedia Viewer</h1> | |
| <div class="container"> | |
| <div class="search-box"> | |
| <form class="text-center" action="#" id="wiki-form"> | |
| <div class="form-group has-feedback"> | |
| <input type="search" class="form-control" id="inputSearch" placeholder="Search"> | |
| <i class="glyphicon glyphicon-search form-control-feedback"></i> | |
| </div> | |
| <button class="btn btn-primary">Submit</button> | |
| <a class="btn btn-primary" href="http://en.wikipedia.org/wiki/Special:Random" target="_blank">Random</a> | |
| </form> | |
| </div> | |
| </div> | |
| </br> | |
| <div class="container"> | |
| <div class="search-results"> | |
| <div class="list-group" id="results-list"> | |
| </div> | |
| </div> | |
| </div> | |
| </div id="box" class="container"> | |
| <p class="photographer">Wikipedia & Images by Che Mug | Photos by <a href="http://www.unsplash.com">Unsplash</a></p> | |
| </div> | |
| </div> | |
| </body> | |
| <html> |
This file contains hidden or 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() { | |
| var wikiSearch = ""; | |
| var wikiResults = []; | |
| var resultsHTML = ""; // reset HTML | |
| function setResults(){ //called after getJSON is done | |
| $('#results-list').html(resultsHTML); | |
| } | |
| function changeImage(query) { | |
| /*change background image based on location using a random photo Unsplash. | |
| Called within setWeather function, in success callback when weather retrieved*/ | |
| $.ajax({ | |
| url: "https://api.unsplash.com/photos/random?client_id=cb71d7aa2cd8b8d7af97210052ea1f77b6b9a211757605eb599ba03ef97ec94b&query=" + query, | |
| cache: false, | |
| success: function(result) { | |
| randomPhoto = result.urls.regular; | |
| photoName = result.user.name; | |
| photoLocation = result.location.country; | |
| photoCity = result.location.city; | |
| $('body').css('background-image', 'url(' + randomPhoto + ')'); | |
| if(photoCity === null){ | |
| $('.photographer').html('Wikipedia & Images © by Che Mug | Photo by ' + photoName + ' | ' + photoLocation); | |
| } else { | |
| $('.photographer').html('Wikipedia & Images © by Che Mug | Photo by ' + photoName + ' | ' + photoCity + ', ' + photoLocation); | |
| } | |
| } | |
| }); | |
| } | |
| function getWiki(query) { | |
| $.getJSON("https://en.wikipedia.org/w/api.php?action=query&list=search&utf8&srsearch=" + query + "&format=json&callback=?", function(result) { // returns 10 results, set &sroffset=? in URL for different number | |
| resultsHTML = ""; //reset HTML variable before populate with new data | |
| if (result.query.searchinfo.totalhits === 0) { | |
| resultsHTML += "<h2 class='text-center'>No results found, try again</h2>"; | |
| } else { | |
| wikiResults = result.query.search; //only keep the query object of the result object | |
| for (i = 0; i < wikiResults.length; i++) { // loop, convert to full URL, add to wikiResults array | |
| var urlString = wikiResults[i].title.replace(/ /g, "_"); | |
| wikiResults[i].urlString = "https://en.wikipedia.org/wiki/" + urlString; | |
| resultsHTML += "<a class='list-group-item' target='_blank' href='" + wikiResults[i].urlString + "'>" + "<h4 class='list-group-item-heading'>" + wikiResults[i].title + "</h4>" + "<p class='list-group-item-text'>" + wikiResults[i].snippet + "</p>"; | |
| } //for loop | |
| } //if statement | |
| setResults(); // call back to change HTML list group with results, after async getJSON is done | |
| }) //getJSON | |
| } //getWiki function | |
| $("#wiki-form").submit(function() { //get Wiki search term and call back function to load retrieve Wiki data | |
| wikiSearch = ""; | |
| wikiSearch = document.getElementById('inputSearch').value; | |
| getWiki(wikiSearch); | |
| changeImage(wikiSearch); | |
| }); // submit function | |
| }); // document.ready |
This file contains hidden or 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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or 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 { | |
| font-family: 'Work Sans', sans-serif; | |
| min-height: 100%; | |
| padding-top: 60px; | |
| background-image: url("https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=67aed64636699cf66845409d35054fd7"); | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| html { | |
| height: 100%; | |
| } | |
| #box { | |
| position:relative; | |
| } | |
| .photographer { | |
| position:absolute; | |
| top:0; | |
| right:0; | |
| padding-right: 20px; | |
| padding-left: 20px; | |
| padding-bottom: 10px; | |
| padding-top: 20px; | |
| color: white; | |
| } | |
| a.list-group-item:hover { | |
| background-color: #9b59b6; | |
| border-color: #9b59b6; | |
| color: white !important; | |
| } | |
| .search-results { | |
| opacity: 0.9; | |
| } |
This file contains hidden or 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://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment