Wikipedia Page

index.html

<link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
<div class="container">
  <div class= "text-center">
<div class = 'heading'>
  <h1>Wikipedia Search</h1>
  <h3>Free Code Camp Front End Developement</h3>
    <a href ="https://en.wikipedia.org/wiki/Special:Random" target="blank">
  <img src ='http://vectorlogofree.com/wp-content/uploads/2014/02/24483-wikipedia-website-logo-on-black-rounded-square-background-icon-vector-icon-vector-eps.png'></a>
    </div>
  </div>
<input class="form-control" id="searchTerm">
  <button id='search' type="button" class ="btn btn-primary div_hover"><span>Submit</span></button>
  <div id ="output"></div>
</div>

script.js

//Run some jQuery
$(document).ready(function(){
  //On click run code
  $("#search").click(function(){
    //Get value of input field
 var searchTerm = $('#searchTerm').val();
//Run ajax and get return in data type JSON
    var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search="+ searchTerm +"&format=json&callback=?";
    console.log(url);
      $.ajax({
        type: "GET",
        url: url,
        contentType: "application/json; charset=utf-8",
        async: false,
        dataType: "json",
        success: function (data, textStatus, jqXHR) {
          $('#output').html('');
          for(var i=0;i<data[1].length;i++){
            $('#output').prepend("<div><div class='btn-primary'><a href="+data[3][i]+"><h2>" + data[1][i]+ "</h2>" + "<p>" + data[2][i] + "</p></a></div></div>" );        
          }    
        },
        error: function (errorMessage) {
         console.log(errorMessage);
        }
    });
  });
});

scripts

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

style.css

body{
  background-attachment: fixed;
}
.heading{
  border-radius:25px;
  margin:1%;
  padding:1%;
  display:inline-block;
  font-family:'Raleway';
}
.heading img{
  border-radius:25px;
  display:inline-block;
  font-family:'Raleway';
  margin-top:20px;
  width: 100px;
  height: 100px;
}
a { 
  color: inherit;
} 
h2{
  color:black;
  padding-left:1%;
  padding-top:1%;
  text-decoration: none;
}
p{
  padding-bottom: 1%;
  padding-left:1%;
  font-size:15px;
  text-decoration: none;
}
div{
  border-radius:25px;
}

button{
  text-align: center;
  position: relative;
  left: 47%;
  margin-top: 2%;
  font-size: 25px;
  text-decoration:none;
}
.btn {
  background-color: #B0988C;
  border:none;
  box-shadow: 1px 2px 5px 1px black;
}
.div_hover:hover { 
  background-color: #B0988C; 
}
h2{
  font-family:'Raleway';
}
.form-control {
  border:1px solid black;
  text-decoration:none;
}
#output{
  margin-top:2%;
  border-radius:25px;
  font-family:'Raleway';
  display: inherit;
  padding-top:3px;
  font-size:10px;
  line-height:1.4;
  text-decoration: none;
}
.btn-primary{
  font-family:'Raleway';
  color: white;
  font-size: 15px;
  background-color: #4B6C73;
  border-color: black;
  text-decoration: none;
}
.btn-primary:hover{
  color:black;
  background-color: white;
  text-decoration: none;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

Wikipedia Page.markdown

Wikipedia Page

A Pen by Veronica Highsmith on CodePen.

License.