A Pen by Mohammed Jasil on CodePen.
Last active
October 24, 2016 04:23
-
-
Save jasil1414/3e3972611f7dbe0e40669d2959d59259 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
| <html> | |
| <head> | |
| <title>Wikipedia Viewer</title> | |
| <link href="https://fonts.googleapis.com/css?family=Raleway|Rokkitt" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <header class="wikiHeader col-xs-12"> | |
| <div class=" wikiImage col-xs-4"> | |
| <a target='_blank' href="https://en.wikipedia.org/wiki/Special:Random"><img class="img-responsive" alt="Wikipedia Logo" src="http://www.dentalwellness.it/wp-content/uploads/2013/03/WikiPedia-Logo-psd64607.png"></a> | |
| </div> | |
| <div class="col-xs-8 wikiTitle"> | |
| <h3>Wikipedia Viewer</h3></div> | |
| </header> | |
| <div class="wiki col-xl-12 col-xs-12"> | |
| <div class="searchRowAnimate col-xl-12 col-xs-12" id="searchRow"> | |
| <div class="searchField col-sm-4 col-sm-offset-4 col-xs-12"> | |
| <div class="col-xl-12 col-md-12 col-sm-12"> | |
| <input class="search-circle" type='text' id="searchBox" placeholder="Search" value='' name='wikiSearchField'> </div> | |
| <div class="searchButton"><button class="btn btn-default wikiSearchButton" id="searchButtonID">Search</button></div> | |
| </div> | |
| </div> | |
| <div class="row col-xl-12 col-xs-12"> | |
| <div class="wikiInfo"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="container-fluid"> | |
| <div> | |
| <p>Made with <span class="glyphicon glyphicon-heart"></span> for Web by<a href="https://jasil1414.github.io/me"> Jasil </a></p> | |
| <div> | |
| </footer> | |
| </body> | |
| </html> |
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() { | |
| var query; | |
| //Search Function which fetches query text from Search box. | |
| function search() { | |
| var search_query = document.getElementById('searchBox').value; | |
| return "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + search_query + "&format=json&callback=?"; | |
| } | |
| //function to render the obtained results on the page | |
| function renderResults(wikiResults) { | |
| for (var i = 0; i < wikiResults[1].length; i++) { | |
| $('.wikiInfo').append("<a class='wikibox' target=_blank href='" + wikiResults[3][i] + "'<div class=\"infoBox\"\><div class=\"infoBoxHeading\"\>" + wikiResults[1][i] + "</div>" + wikiResults[2][i] + "</div></a>"); | |
| } | |
| } | |
| //function to perform AJAX call to wikipedia API | |
| function AJAXCall(query) { | |
| $.ajax({ | |
| type: "GET", | |
| url: query, | |
| async: false, | |
| dataType: "json", | |
| success: function(fetchData) { | |
| var dataWiki = fetchData; | |
| renderResults(dataWiki); | |
| }, | |
| error: function(errorMessage) { | |
| alert("Error"); | |
| } | |
| }); | |
| } | |
| $('input').click(function() { | |
| $(this).addClass('search-box', 700); | |
| }); | |
| // function to perform search operation on button click | |
| $("#searchBox").keyup(function(event) { | |
| if (event.keyCode == 13) { | |
| $("#searchButtonID").click(); | |
| } | |
| }); | |
| $('.wikiSearchButton').on('click', function() { | |
| $('#searchRow').animate({ | |
| top: '1%' | |
| }, 700); | |
| query = search(); | |
| $('.wikiInfo').html(''); //clear the page of previously loaded results | |
| AJAXCall(query); | |
| }); | |
| }) |
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.1.0/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.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: url(https://raw.githubusercontent.com/jasil1414/me/master/images/Plain-design-pattern-dark-background-image-HD-resolution-latest-pack.jpg); | |
| } | |
| *:focus{ | |
| outline: none; | |
| } | |
| .wikiHeader { | |
| padding-left: 0; | |
| } | |
| .wikiImage { | |
| padding-top: 10px; | |
| padding-left: 0; | |
| } | |
| img { | |
| width: 80px; | |
| height: 72.6px; | |
| } | |
| .wikiTitle { | |
| display: inline; | |
| text-align: right; | |
| color: orange; | |
| } | |
| .searchRowAnimate { | |
| top: 25vh; | |
| } | |
| .searchField { | |
| text-align: center; | |
| position: relative; | |
| } | |
| input { | |
| padding-left: 4px; | |
| padding-right: 4px; | |
| height: 60px; | |
| width: 60px; | |
| border-radius: 30px; | |
| border: solid #023867; | |
| margin-bottom: 10px; | |
| -webkit-animation: as-round 2s linear infinite; | |
| -moz-animation: as-round 2s linear infinite; | |
| animation: as-round 2s linear infinite; | |
| } | |
| @keyframes as-round { | |
| 0%, | |
| 100% { | |
| -webkit-box-shadow: 0 0 25px #006FD7; | |
| -moz-box-shadow: 0 0 25px #006FD7; | |
| box-shadow: 0 0 25px #006FD7; | |
| } | |
| 50% { | |
| -webkit-box-shadow: 0 0 5px #006FD7; | |
| -moz-box-shadow: 0 0 5px #006FD7; | |
| box-shadow: 0 0 5px #006FD7; | |
| } | |
| } | |
| .search-box { | |
| padding-left: 8px; | |
| padding-right: 8px; | |
| margin-top: 15px; | |
| height: 35px; | |
| width: 100%; | |
| border-radius: 20px; | |
| border: solid 3px #033769; | |
| box-shadow: 0 0 0 0; | |
| margin-bottom: 10px; | |
| -webkit-animation: null; | |
| -moz-animation: null; | |
| animation: null | |
| } | |
| .searchButton { | |
| margin-bottom: 10px; | |
| } | |
| .wikiSearchButton:hover { | |
| background: rgba(255, 165, 0, .8); | |
| color: #033769; | |
| } | |
| .wikiSearchButton, | |
| .wikiSearchButton:focus { | |
| background: rgba(3, 55, 105, .8); | |
| color: orange; | |
| border: grey; | |
| border-radius: 30px; | |
| outline: none; | |
| } | |
| .wikiInfo { | |
| position: absolute; | |
| display: block; | |
| } | |
| .wikibox { | |
| display: block; | |
| background: rgba(50, 50, 50, 0.7); | |
| margin-bottom: 0.8em; | |
| padding-left: 0.5em; | |
| padding-right: 0.5em; | |
| padding-bottom: 0.5em; | |
| border-radius: 5px; | |
| color: white; | |
| font-family: 'Rokkitt', serif; | |
| font-size: 1.3em; | |
| letter-spacing: 0px; | |
| } | |
| .wikibox:hover, | |
| .wikibox:focus { | |
| text-decoration: none; | |
| color: orange; | |
| } | |
| .infoBoxHeading { | |
| font-family: 'Raleway', sans-serif; | |
| font-weight: bold; | |
| font-size: 1.3em; | |
| } | |
| footer { | |
| margin-top: 10px; | |
| font-size: 0.9em; | |
| padding-right: 10px; | |
| width: 100%; | |
| background: black; | |
| opacity: 0.5; | |
| position: fixed; | |
| text-align: right; | |
| bottom: 0vh; | |
| color:orange; | |
| } | |
| footer a:hover { | |
| text-decoration: none; | |
| } | |
| @media screen and (max-width: 720px) and (min-width: 320px) { | |
| img { | |
| margin-left: -10%; | |
| } | |
| img { | |
| width: 50px; | |
| height: 45.37px; | |
| } | |
| } |
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" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment