Forked from whatisthis's Pen Wikepdia viewer.
A Pen by whatisthis on CodePen.
Created
May 28, 2016 00:56
-
-
Save anonymous/7550c9e5238abe3da65d79110ed9a336 to your computer and use it in GitHub Desktop.
Wikepdia 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
| <body> | |
| <div class="jumbotron"> | |
| <div class="page-header img-responsive"><h1 class="text-center">Wikiedepia Page Viewer<br> | |
| <small>A pen by Craig A. </small></h1></div> | |
| <div class="text-center "><input class="inputText"></input><br> | |
| <button class="btn-primary btn" >Search Wiki!</button> | |
| </div> | |
| </div> | |
| <div class="container-fluid"> | |
| <div class="row"> | |
| <div class="well"><h5 class="searchTitles"></h5><br> | |
| <h6 class="contentOfTitle"> </h6> | |
| </div> | |
| </div> | |
| </div> | |
| </body> |
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
| $('.btn').click( function(){ | |
| search(); | |
| }); | |
| function search(){ | |
| var searchTitle=$(".inputText").val(); | |
| $.ajax({ | |
| url:"//en.wikipedia.org/w/api.php", | |
| data: { | |
| action:'query', | |
| list:'search', | |
| srsearch: searchTitle, | |
| format:'json', | |
| }, | |
| dataType:'jsonp', | |
| success:function(data){ | |
| var html=""; | |
| for(var x=0;x<10;x++){ | |
| //console.log(data); | |
| /*create variable for html div */ | |
| html+="<div class='well'>"; | |
| //append html to div class | |
| html+="<h5><a href='https://en.wikipedia.org/wiki/"+data.query.search[x].title.toString()+"'>"+data.query.search[x].title+"</a></h5>" | |
| html+="<p>"+data.query.search[x].snippet+"</p>" | |
| html+="</div>" | |
| $('.searchTitles').html(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
| <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
| .jumbotron{ | |
| margin-bottom:0; background:url("https://static.pexels.com/photos/6550/nature-sky-sunset-man-large.jpeg") no-repeat center center; | |
| background-size:100% 100%; | |
| height:400px; | |
| width:100%; | |
| } | |
| .page-header{ | |
| border-bottom:0px; | |
| } | |
| .inputText{ | |
| display: inline-block; | |
| -webkit-box-sizing: content-box; | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| padding: 10px 20px; | |
| border: 1px solid #b7b7b7; | |
| -webkit-border-radius: 3px; | |
| border-radius: 3px; | |
| font: normal 16px/normal "atomic-age", Helvetica, sans-serif; | |
| color: rgba(0,142,198,1); | |
| -o-text-overflow: clip; | |
| text-overflow: clip; | |
| background: -webkit-linear-gradient(-90deg, rgba(137,163,86,1) 0, rgba(124,188,10,1) 100%); | |
| background: -moz-linear-gradient(180deg, rgba(137,163,86,1) 0, rgba(124,188,10,1) 100%); | |
| background: linear-gradient(180deg, rgba(137,163,86,1) 0, rgba(124,188,10,1) 100%); | |
| background-position: 50% 50%; | |
| -webkit-background-origin: padding-box; | |
| background-origin: padding-box; | |
| -webkit-background-clip: border-box; | |
| background-clip: border-box; | |
| -webkit-background-size: auto auto; | |
| background-size: auto auto; | |
| -webkit-box-shadow: 231px 6px 15px 0 rgba(0,0,0,0.2) inset; | |
| box-shadow: 231px 6px 15px 0 rgba(0,0,0,0.2) inset; | |
| text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ; | |
| -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); | |
| -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); | |
| -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); | |
| transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); | |
| color:white; | |
| } | |
| .contentOfTitle{ | |
| margin:0; | |
| padding:0; | |
| } | |
| searchTitle{ | |
| margin:0; | |
| padding:0; | |
| } |
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="//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