Wikipedia Viewer

index.html

<div id="wikiViewer" class="container">
  <div class="row no-gutters">
    <div class="col-12">
        <div class="search-wrapper">
        <form class="form-inline search-form">
          <div class="input-group col-xs-12 col-md-6 col-lg-6">
            <input type="text" class="form-control" v-model="query">
            <button class="btn btn-primary" type="submit" v-on:click="search"><i class="fa fa-search" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-danger" v-on:click="randomPage"><i class="fa fa-random" aria-hidden="true"></i></button>
          </div><!-- ./ input-group -->
        </form>
      </div><!-- /.search-wrapper -->
    </div>
  </div><!-- ./row -->
  <div div class="row no-gutters">
    <div class="col-12">
      <div class="card wiki-card" v-for="item in items">
        <div class="card-block">
          <h4 class="card-title">{{item.title}}</h4>
          <p class="card-text">{{item.extract}}</p>
          <a v-bind:href="'https://en.wikipedia.org/?curid=' + item.pageid" class="btn btn-primary" target="_blank">View Page</a>
        </div>
      </div>
    </div>
  </div>
</div>

script.js

var app = new Vue({
  el: "#wikiViewer",
  data : {
    query : '',
    items : []
  },
  methods : {
    search : function(e){
      var self = this;
      e.preventDefault();
      
      var api = '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=';
      
      $.ajax({
        url: api + this.query,
        dataType: "jsonp",
      }).then(function(response){
        console.log(response);
        self.items = response.query.pages;
      });
      
    },
    randomPage : function() {
      window.open('http://en.wikipedia.org/wiki/Special:Random', '_blank');
    }
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>

style.css

.search-wrapper {
  height: 50vh; 
  background: url('http://i.imgur.com/BS7VhvX.jpg') center center;
  backgroun-size: cover;
}

.search-form {
  height: 100%;
  justify-content: center;
  align-items: center;
}

.wiki-card {
  margin: 20px auto;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />

wikipedia-viewer.markdown

Wikipedia Viewer

A Pen by Gil Sousa on CodePen.

License.