Wikipedia Viewer 3

index.html

<div class="jumbotron text-center" id="jumbo">
   <h1><i class="fa fa-wikipedia-w" aria-hidden="true"></i><span class="small-caps">ikipedi</span>A<sub>&#174;</sub> V<span class="small-caps">iewe</span>R</h1>
   <p>Enter your query into the search box!</p>
   <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png" alt="Wikipedia Logo" class="img img-responsive center-block" id="wiki-logo">
</div>
<div class="container">
   <div class="row" id="form">
      <div class="input-group">
         <input href="https://en.wikipedia.org/wiki/Special:Random" type="search" class="form-control" placeholder="Search" id="searchBox" autocomplete="off">
         <span class="input-group-btn" type="submit" id="basic-addon2">
               <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true">
               </span></button>
         <button class="btn btn-default" id="random" type="submit">Random</button>
         </span>
      </div>
   </div>
   <div class="center-block" id="results">
      <div class="well hidden" id="wellClass">
         <ul id="content">
            <li id="0"></li>
            <li id="1"></li>
            <li id="2"></li>
            <li id="3"></li>
            <li id="4"></li>
            <li id="5"></li>
            <li id="6"></li>
            <li id="7"></li>
            <li id="8"></li>
            <li id="9"></li>
         </ul>
      </div>
   </div>
</div>

script.js

$("input").on("keyup", function() {
   var list = document.querySelector("ul");
   if (this.value !== "") {
      $.ajax({
         url: 'https://en.wikipedia.org/w/api.php?',
         async: true,
         data: {
            action: 'query',
            list: 'search',
            format: 'json',
            srsearch: this.value,
         },
         type: 'GET',
         dataType: 'jsonp',
         success: function(data) {
            for (var i = 0; i < 10; i++) {
               $("#wellClass").removeClass("hidden");
               var title = data.query.search[i].title;
               var description = data.query.search[i].snippet;
               var urlTitle = "https://en.wikipedia.org/wiki/" + title.replace(/ /g, "_");
               $("#" + i + "").replaceWith("<a href=" + urlTitle + " target=\"_blank\"><li id=" + i + " class=\"animated fadeInUp panel\"><h3>" + title + "</h3>" + "<p class=\"hidden\">" + description + "</p></li></a>");

               $("li").mouseover(function() {
                  $(this).children("p").removeClass("hidden");

               });
               $("li").mouseout(function() {
                  $(this).children("p").addClass("hidden");
               });

            }
         }

      });
   } else {
      $("#wellClass").addClass("hidden");
   }
});

$("#random").on('click', function() {
   window.open("https://en.wikipedia.org/wiki/Special:Random", "_blank")
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

style.css

@import 'https://fonts.googleapis.com/css?family=Merriweather:300,400,700,900,900i';
body {
   font-family: 'Merriweather', serif;
}

.btn-default {
   margin-bottom: 10px;
}

#wiki-word {
   height: 36px;
}

sub {
   font-size: 25%;
}

#jumbo {
   font-weight: 350 !important;
}

#wiki-logo {
   width: 20%;
}

.small-caps {
   font-variant: small-caps;
}

li {
   list-style: none;
}

.panel {
   margin-left: 0px !important;
   padding: 25px;
}

.well {
   margin-top: 25px;
}

a:link {
   text-decoration: none;
}


/** This fixes the weird padding from the bootstrap well which was pushing things to the right **/

.well {
   padding-left: 0px !important;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />

Wikipedia Viewer 3.markdown

Wikipedia Viewer 3

This is a simple Wikipedia viewer project.

A Pen by Brandon on CodePen.

License.