Wikipedia Viewer

index.html

<div class="container">

<div class="row title">
  <div class="col-md-12 panel-group">
Wiki View
  </div>
</div>

<div class="row searchBar">
  <div class="col-md-12 panel-group">
    <div class="input-group">
      
      <input type="text" class="form-control" id="searchTerm" placeholder="Search Wikipedia for...">
      
      <span class="input-group-btn">  
        <button id="search" class="btn btn-default" type="button">
          
            <i class="fa fa-search" aria-hidden="true"></i>
         
        </button>
      </span>

       <span class="input-group-btn"> 
        <button class="btn btn-default" type="button"><a href="https://en.wikipedia.org/wiki/Special:Random" target="blank">Surprise Me</a></button>
      </span>
     </div>
      <ul id="output">
  </ul>
      
    
  </div>
</div>

script.js

$(document).ready(function(){
  $("#search").click(function(){
    var searchTerm=$('#searchTerm').val();
    var url="https://en.wikipedia.org//w/api.php?action=opensearch&search="+ searchTerm +"&format=json&callback=?";
    
    $.ajax({
      type:"GET",
      url: url,
      async:false,
      dataType: "json",
      success: function(data){
        // Get heading console.log(data[1][0]);
        //Get description console.log(data[2][0]);
        // Get link console.log(data[3][0]);
        $('#output').html('');
        for(var i=0; i < data[1].length; i++){
          $('#output').append("<li><a href="+data[3][i]+" target='_blank'>"+data[1][i]+"</a><p>"+data[2][i]+"</p></li> ");
        }
        
        //Clears the search bar
        $("#searchTerm").val('');
        
        
        },
        
      
      error: function(errorMessage){
        alert("Error");
      }
      
    });
    
  });
  
  $("#searchTerm").keypress(function(e){
      if(e.which==13){
        $("#search").click();
      }
    });
});

scripts

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

style.css

.row {
  text-align: center;
}

.title {
  font-family: 'Special Elite', cursive;
  font-size: 75px;
  margin-top: 1em;

}

.searchBar {
   	max-width: 730px;
    
}

.searchBar input {
  border: 2px solid #555;
}

.searchBar input:focus {
  border: 2px solid #000;
}

.btn {
  border: 2px solid #000;
  margin-left: 3px;
  margin-right: 3px;

}

.btn a {
  text-decoration: none;
  color: #000;
}

ul {
  list-style: none;
  text-align: left;
  margin: 0;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

wikipedia-viewer.markdown

Wikipedia Viewer

A Pen by Jessica on CodePen.

License.