building asimple web app for a Wikipedia viewer
A Pen by mohammedadem on CodePen.
Created
June 11, 2016 09:25
-
-
Save mohamma548/4519151231e3defe6a6dddd9ddf85dc2 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> | |
| <body> | |
| <div class= "container"> | |
| <div class="bg-block"><p>Wikipedia Viewer</p> | |
| <div class="row"> | |
| <div class="col-sm-9"><input type="text" id="search"><br><button class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Search</button></div> | |
| <div class="col-sm-3 wiki"><a href="https://en.wikipedia.org/wiki/Special:Random" target =_blank><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTk1hFJxZi8PsLLeVy5WFpfzY3yjsFfrE-Hbh7TY-i-g99BzEKN">Random Article</a></div> | |
| </div> | |
| </div> | |
| <div class="display_Zone"> | |
| <ul class="headers"></ul> | |
| </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
| //the user start to search any word by | |
| //writing on the input form | |
| //user can generate random wikipedia article | |
| //by clicking the wikipedia image | |
| $("document").ready(function(){ | |
| $(".btn").click(function(){ | |
| wikiViewer(); | |
| }); | |
| }); | |
| function wikiViewer(){ | |
| // taking input value | |
| var searchArticle = $("#search").val(); | |
| //$(".headers").text(searchArticle); | |
| $.ajax({ | |
| type:"GET", | |
| url:'https://en.wikipedia.org/w/api.php?action=opensearch&search= '+searchArticle+'&format=json&callback=?', | |
| dataType: "json", | |
| success: function(data){ | |
| // display links as well as the description | |
| //of the word to be searched | |
| //using a loop we iterate all the words | |
| //and links related to the input | |
| for(var i=0;i<data[1].length;i++){ | |
| $(".headers").prepend('<li><a href='+data[3][i]+'>'+data[1][i]+'</a><p>'+data[2][i]+'</p></li>'); | |
| } | |
| //console.log("hello world"); | |
| }, | |
| error: function(errorMessage){ | |
| $(".headers").text("try again an error has happened!"); | |
| } | |
| }); | |
| } | |
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="https://code.jquery.com/jquery-2.2.4.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{ | |
| background-image:url('https://www.dropbox.com/s/j6ifd2kbf9lmi0k/backgroundimage-wiki.jpg?dl=1'); | |
| } | |
| .bg-block{ | |
| background-color:#EAF5F3; | |
| text-align:center; | |
| font-family: lobster; | |
| margin:40px; | |
| padding:10px; | |
| } | |
| .bg-block p { | |
| text-shadow: 3px 3px 2px black; | |
| font-size:60px; | |
| } | |
| input { | |
| width: 100%; | |
| margin: 10px 0px; | |
| padding: 7px; | |
| border-radius: 5px; | |
| font-size: 16px; | |
| } | |
| .wiki{ | |
| font-size:20px; | |
| } | |
| .display_Zone { | |
| background-color:#EAF5F3; | |
| text-align:left; | |
| font-family: lobster; | |
| margin:0px 40px ; | |
| padding:10px; | |
| } | |
| .headers{ | |
| font-size:25px; | |
| color: black; | |
| } | |
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.6/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment