This project's purpose is to allow the user to search Wikipedia and to receive a random article if they click the Random Article button. In order to achieve the viewer's functionality, I used JavaScript, JSON, and jQuery. I also added some animation to the query search and retrieval.
A Pen by Angela Johnson on CodePen.
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Wiki Viewer</title> | |
| </head> | |
| <body> | |
| <div class="title container text-center"> | |
| <h1 class="projTitle">Wikipedia Viewer</h1> | |
| </div> | |
| <div class="container text-center"> | |
| <div class="row"> | |
| <div class="col-sm-6"> | |
| <div class="box"> | |
| <div class="container-4"> | |
| <input type="search " id="searchInputBox" placeholder="Search... " /> | |
| <button class="icon "><i class="fa fa-search "></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-sm-6 "> | |
| <button id="randomArticleButton" type="btn btn-default" class="btn btn-default ">Random Wikipedia Article</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="textOutput" class="animated"> | |
| <ul id="queryOutput"></ul> | |
| </div> | |
| <div id="background"> | |
| <div class="fixedBackground thinkingImage container text-center "> | |
| <img class="thinkingGraphic" src="http://res.cloudinary.com/angiemjohnson/image/upload/v1464618864/imageedit_4_2842644881_yjemcw.gif | |
| " alt="manthinking "> | |
| </div> | |
| </div> | |
| </html> |
| var searchCounter = 0; | |
| $(document).ready(function() { | |
| //perform search when search button is clicked | |
| $(".icon").click(function() { | |
| // retrieves information put in search box | |
| var searchTerm = $("#searchInputBox").val(); | |
| if(searchTerm!==""){ | |
| if (searchCounter > 0) { | |
| $("#textOutput").toggleClass('slideInUp'); | |
| $("#textOutput").toggleClass('slideOutDown'); | |
| } | |
| //console.log(searchTerm); | |
| getWikiData(searchTerm); | |
| } else | |
| { | |
| alert("Please enter a term to search for"); | |
| } | |
| }); | |
| //allows the user to see a random Wiki article when the button is clicked | |
| $(document).ready(function() { | |
| $('#randomArticleButton').click(function() { | |
| window.location = "https://en.wikipedia.org/wiki/Special:Random"; | |
| }); | |
| }); | |
| }); | |
| function getWikiData(searchTerm) { | |
| //Wiki's API URL that searches the info from the search box | |
| var wikiApiUrl = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&format=json&callback=?" | |
| //allows to you to view the data from the call via a url | |
| //console.log(wikiApiUrl); | |
| //Call to Wiki's API using the following arguments | |
| $.ajax({ | |
| type: 'GET', | |
| url: wikiApiUrl, | |
| dataType: "json", | |
| success: function(data) { | |
| //console.log(data); | |
| displayData(data); | |
| }, | |
| error: function(errorDisplay) { | |
| alert("Error! Could not retrieve information"); | |
| } | |
| }); | |
| } | |
| function displayData(data) { | |
| // erases the previous query before searching for the next one | |
| $("#queryOutput").html(""); | |
| /*iterates through data retrieved from the API and then displays it as link that is included in the heading and summary. | |
| The data is also displayed as list by adding the <li> element.*/ | |
| for (var i = 0; i < data[1].length; i++) { | |
| var heading = data[1][i]; | |
| var summary = data[2][i]; | |
| var pageLink = data[3][i]; | |
| var urlString = "<li><a href= " + pageLink + ">" + heading + "</a><p>" + summary + "</p></li>"; | |
| //console.log(urlString); | |
| $("#queryOutput").prepend(urlString); | |
| } | |
| //animation effect that allows the query to slide in up and exit sliding downward. | |
| if (searchCounter > 0) { | |
| $("#textOutput").toggleClass('slideOutDown'); | |
| } | |
| else{ | |
| $("#textOutput").show(); | |
| } | |
| searchCounter++; | |
| $("#textOutput").toggleClass('slideInUp'); | |
| } |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment-with-locales.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> |
| .title{ | |
| background-color:#9F111B; | |
| width:auto; | |
| margin-bottom: 3em; | |
| padding-bottom: 1em; | |
| box-shadow: -.5em .5em .5em #888888; | |
| } | |
| .projTitle{ | |
| color:white; | |
| font-size: 3em; | |
| border-style: solid; | |
| border-color:#CCCCCC; | |
| border-width:5px; | |
| } | |
| body { | |
| background-color:#CCCCCC; | |
| } | |
| .box { | |
| padding-bottom: 3em; | |
| } | |
| .container-4{ | |
| overflow: hidden; | |
| width: 330px; | |
| vertical-align: middle; | |
| white-space: nowrap; | |
| box-shadow: -.5em .5em .5em #888888; | |
| background-color: #888888; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius-: 5px; | |
| border-radius: 5px; | |
| } | |
| .container-4 input#searchInputBox{ | |
| width: 330px; | |
| height: 50px; | |
| background: #2b303b; | |
| border: none; | |
| font-size: 10pt; | |
| float: left; | |
| color: #fff; | |
| padding-left: 15px; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| border-radius: 5px; | |
| } | |
| .container-4 input#searchInputBox:-webkit-input-placeholder { | |
| color: #65737e; | |
| } | |
| .container-4 input#searchInputBox:-moz-placeholder { /* Firefox 18- */ | |
| color: #65737e; | |
| } | |
| .container-4 input#searchInputBox:-moz-placeholder { /* Firefox 19+ */ | |
| color: #65737e; | |
| } | |
| .container-4 input#searchInputBox:-ms-input-placeholder { | |
| color: #65737e; | |
| } | |
| .container-4 button.icon{ | |
| -webkit-border-top-right-radius: 5px; | |
| -webkit-border-bottom-right-radius: 5px; | |
| -moz-border-radius-topright: 5px; | |
| -moz-border-radius-bottomright: 5px; | |
| border-top-right-radius: 5px; | |
| border-bottom-right-radius: 5px; | |
| border: none; | |
| background: #232833; | |
| height: 50px; | |
| width: 50px; | |
| color: white; | |
| opacity: 0; | |
| font-size: 10pt; | |
| -webkit-transition: all .55s ease; | |
| -moz-transition: all .55s ease; | |
| -ms-transition: all .55s ease; | |
| -o-transition: all .55s ease; | |
| transition: all .55s ease; | |
| } | |
| .container-4:hover button.icon, .container-4:active button.icon, .container-4:focus button.icon{ | |
| outline: none; | |
| opacity: 1; | |
| margin-left: -50px; | |
| } | |
| .container-4:hover button.icon:hover{ | |
| background: #9F111B; | |
| } | |
| .fixedBackground{ | |
| width: 100%; | |
| height: auto; | |
| position: absolute; | |
| top: 15em; | |
| left: 0; | |
| } | |
| .thinkingImage{ | |
| z-index: -5; | |
| } | |
| .thinkingGraphic{ | |
| max-width: auto; | |
| height: 100%; | |
| } | |
| .btn{ | |
| font-size: 15px; | |
| background-color: #2b303b; | |
| color:white; | |
| border-color: #2b303b; | |
| width:auto; | |
| height:50px; | |
| border-radius:5px; | |
| box-shadow: -.5em .5em .5em #888888; | |
| } | |
| #textOutput{ | |
| background: rgba(255, 255, 255, 0.5); | |
| margin-right:1em; | |
| margin-left: 1em; | |
| padding:1em; | |
| display:none; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius-: 5px; | |
| border-radius: 5px; | |
| box-shadow: -.5em .5em .5em #888888; | |
| } |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" /> |