searchApedia

index.jade

main.animated.fadeIn
  section
    p.animated.bounce SearchAPedia
    input#search.btn-5(name="search")
    button(value="submit" type="search") 👀 
    a(href="https://en.wikipedia.org/wiki/Special:Random" target="_blank")      🎲
    section#results
      article.wikiPage
        p#def click 👀 to search & 🎲 to see a random article.

script.js

$(document).ready(function() {

  $('button').on('click', function() {
    $('#results').children().remove();
    var pages = [];
    var url = 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=';
    var value = $('input').val();
    url += value;
    //console.log(url);

    if (value === "") {
      $('input').val('Javascript');
    } else {
      $.ajax(url, {
        type: 'GET',
        contentType: "application/json",
        dataType: 'jsonp',
        success: function(json) {

          var resultJSON = JSON.stringify(json.query.pages);
          var result = $.parseJSON(resultJSON);

          $.each(result, function(k, v) {
            pages.push(k);
          });

          for (var i = 0; i <= pages.length; i++) {
            $('#results').append(
              '<a href="https://en.wikipedia.org/?curid=' + json.query.pages[pages[i]]['pageid'] + '">' +
              '<article class="wikiPage">' +
              '<img src="' + json.query.pages[pages[i]]['thumbnail']['source'] + '" />' +
              '<span class="title">' + json.query.pages[pages[i]]['title'] + '</span>' +
              '<p class="extract">' +
              json.query.pages[pages[i]]['extract'] +
              '</p>' +
              '</article></a>');
          }
        }
      });
    }
  });

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

searchapedia.markdown

searchApedia

A Pen by Kameron Robinson on CodePen.

License.

style.sass

$g1: rgb(random(255),random(255),random(255))
$g2: rgb(random(255),random(255),random(255))

body
  color: white
  font-family: verdana
  text-transform: uppercase
  font-size: 2em
  
main
  position: absolute
  top: 0
  bottom: 0
  left: 0
  right: 0
  width: 100%
  background-color: blue
  background-image: linear-gradient($g1 , $g2)
  //padding-top: 10%
img
  width: 100%
  
body
  //width: 960px
  //margin: 0 auto
  
body > *
  margin: auto
  //width: 500px
  //border: 1px solid blue
  //display: block
  overflow: auto

section
  //margin-top: 5%
  overflow: hidden
  text-align: center
  
#weatherIcon
  height: 50px
  width: 50px
  padding: 0px
  margin: 0px
  
img
  height: 50px
  width: 50px
  
img:hover
  width: 60px
  height: 60px
  
.wikiPage
  background-color: $g2 + 90
  height: 100%
  //position: absolute
  //left: 802px
  //top: 639px
  // width: 476px
  // height: 205px
  z-index: 2
  margin: 100px auto
  text-align: left
  width: 80%
  opacity: 0.92
  border-radius: 8px
  margin-top: 50px
  margin-bottom: 50px

article
  padding-bottom: 10px
  transition: box-shadow .5s ease-in-out
    
article:hover
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1), 0 6px 20px 0 rgba(0, 0, 0, 0.3)
  
span
  color: #010
  font-size: .45em
  margin: 10px
  
img
  //float: left
  padding: 10px 10px
  //width: 80px
  //height: 80px

.title
  font-size: 20px
  color: black
  
p.extract
  width: 80%
  overflow: hidden
  /* border: 1px solid #f00 */
  text-overflow: ellipsis
  white-space: nowrap
  
.extract
  color: black + 80
  padding: 0 50px
  font-size: .56em
a
  text-decoration: none

#search
  margin-bottom: 50px
  line-height: 46px
  font-size: 1em
  width: 190px
  background: rgba(0,0,0,0)
  border-radius: 35px
  height: 50px
  border-color: #eee

button
  font-size: 35px
  //margin: -15px
  background: rgba(0,0,0,0)
  color: white
  border-radius: 100px
  position: absolute
  border: none
  cursor: pointer

#def
  color: #000
  font-size: .76em
  text-align: center
  vertical-align: middle
/////////////////////////////
//button-5 
///////////////////////////

.btn-5
  border: 0 solid
  border-radius: 100px
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0)
  outline: 1px solid
  outline-color: rgba(255, 255, 255, 0.5)
  outline-offset: 0px
  text-shadow: none
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1)
  &:hover
    border: 1px solid
    border-radius: 100px
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2)
    outline-color: rgba(255, 255, 255, 0)
    outline-offset: 15px
    text-shadow: 1px 1px 2px #427388

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />