Wikipedia Viewer

index.html

<div class="container wrap_title">
  <h1>wikiSearch</h1>
  <form>
    <div class="form-group">
      <label for="input">Search for an article.</label>
      <div class="input-group">
        <input type="text" class="form-control" name="input" id="input" placeholder="Enter text here...">
      </div>
    </div>
  </form>
    <ul class="list-unstyled list-group">
      <div class="output">
      </div>
    </ul>
    <p>Click <a href="https://en.wikipedia.org/wiki/Special:Random"     target="_blank">here</a> for a random article.</p>
</div>

script.js

$(document).ready(function(){
  
  $('form').on('submit',function(e){
    e.preventDefault();
    var input = $('#input').val();
    var url = 'http://en.wikipedia.org/w/api.php?format=json&action=opensearch&limit=10&search='+input+'&callback=?';
    var count = 0;
    
    $.ajax({
      type: "GET",
      url: url,
      async: false,
      dataType: "jsonp",
      success: function (data, textStatus, jqXHR) {
        for (var i = 0; i <data[1].length; i++){
          $(".output").append("<li class='list-group-item'><h3><a href="+data[3][i]+">"+data[1][i]+"</a></h3><p>"+data[2][i]+"</p></li>");
        };
      },
      error: function (errorMessage) {
        alert("This is the error: "+errorMessage);
      }
    });
  });
});

scripts

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

style.css

@import url('https://fonts.googleapis.com/css?family=Arvo:400,700');
@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900');

body {
  overflow: visible;
  height: 100%;
  width: 100%;
  font-family: "Lato", Helvetica, Arial, sans-serif;
  font-size 16px;
  line-height: 1.72222;
  color: #34495e;
  background-color: #f8f8f8;
  display: block;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  padding: 90px;
}

::selection {
  background: #1abc9c;
  color: white;
}

div {
  display: block;
}

.wrap_title {
  margin-bottom: 30px;
}

h1 {
  font-family: inherit;
  font-weight: 400;
  line-height: 1.1;
  color: inherit;
  margin-top: 30px;
  margin-bottom: 50px;
  font-size: 80px;
  font-family: arvo;
  letter-spacing: 6px;
  text-align: center;
}

p {
  font-size: 15px;
  line-height: 1.46428571;
  margin-bottom: 10px;
  margin-top: 10px;
  font-weight: 300;
  display: block;
}

form {
  display: block;
  margin-top: 0em;
}

.form-group {
  position: relative;
  margin-bottom: 20px;
}

label {
  font-weight: normal;
  font-size: 20px;
  line-height: 2.4;
  cursor: default;
  margin: 0 10 0 10px;
}

.form-control {
  border: 2px solid #bdc3c7;
  color: #34495e;
  font-family: "Lato", Helvetica, Arial, sans-serif;
  font-size: 20px;
  line-height: 1.467;
  padding: 8px 12px;
  height: 50px;
  -webkit-appearance: none;
  border-radius: 6px;
  box-shadow: none;
  transition: border .25s linear, color .25s linear, background-color .25s linear;
}

.form-control::-webkit-input-placeholder {
  color: #bdc3c7;
  opacity: 1;
}

input {
  -webkit-rtl-orering: logical;
  user-select: text;
  cursor: auto;
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  text-align: start;
  -webkit-writing-mode: horizontal-tb;
}

h3 {
  margin-top: 10px;
  margin-bottom: 5px;
  font-family: inherit;
  font-weight: 700;
  line-height: 1.1;
  color: inherit;
  display: block;
}

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://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

wikipedia-viewer.markdown

Wikipedia Viewer

A Pen by Ethan on CodePen.

License.