Wikipedia Viewer by BoCode

index.html

<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">

<h1> Wikipedia Viewer </h1>

<div class="col-md-12">
  <div class="container-fluid">
    
    <div class="row text-center" id="searchbar"> 
      <form action="/search" id="search_form">
  <input id="search_box" type="text" placeholder=" Search for..."  value="">
          <button id="searchButton" type="button" type="submit">Search</button>
          <button id="randomButton" type="button">Show Random Article</button>
       
</form>
     </div>
    
    <div id="searchResults">
    </div>
    
   <div class="container-fluid">
     
<iframe src="" id="randomResults" class="randomResults" scrolling="yes" frameborder="0">
Random article
</iframe>

    </div>
  </div>
</div>

script.js

$(document).ready(function(){
        
    $('#searchButton').click(function() { 
        $("#searchResults").empty(); 
        var search_term = document.getElementById("search_box").value; 
      
        $.ajax({                    
             url: 'https://en.wikipedia.org/w/api.php?action=query',  
            type: 'GET', 
            dataType: 'json',  
            data: {
               list: 'search', 
               srsearch: search_term,
               format: 'json',
               origin: '*'
           }, 
                    
            success: function (data) {
                var hits = data.query.searchinfo.totalhits;
                if (hits > 0) {
                for (i=0; i< data.query.search.length; i++) {
                    var title = data.query.search[i].title;
                    var title_link = 'https://en.wikipedia.org/wiki/'+ title;                
                   $("#randomResults").attr("src", "about:blank");                                                                                        
                   $("#searchResults").append('<a href="' + title_link + '" target="blank">' + data.query.search[i].title + ':' +'<br/>'+'</a>');                                             
               $("#searchResults").append('<p>' + data.query.search[i].snippet + '...' +'<br/>'+'</p>');
                }        
              }
              
              else {
                $("#searchResults").empty();
                                      
                $("#randomResults").attr("src", "about:blank");
                $("#searchResults").html("No results found.  Try again...")
              }
            },               
                        
            error: function error(){
                  alert ("Error");
            }    
        });
     });  
  
$("#search_box").keypress(function(e){
    if(e.which == 13){ 
        $("#searchButton").click(); 
        return false; 
    } 
}); 
  
$('.randomResults').css('height', $(window).height()+'px'); 
      $('#randomButton').click(function() { 
          $("#searchResults").empty(); 
          $("#search_box").val('');
          $("#randomResults").attr("src", "https://en.wikipedia.org/wiki/Special:Random");  
       });  
  
  }); 

scripts

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

style.css

body {
  background: white;
  background-size: cover;
}

h1 {
  font-family: Courgette, Sans-serif;
  font-size: 80px;
  margin-top: 50px;
  color: red;
  text-align: center;
}

#searchbar {
  margin: 0 auto;
}

#search_form{
font-family: Sans-serif;  
font-size: 20px;  
padding-top: 50px;
padding-bottom: 20px;
margin: 0 auto;
}

input {
  width: 400px;
  height: 48px;
  border-radius: 8px;
  margin-bottom: 50px;
  border: 2px solid;
  border-color: red;
  padding: 10px;
}

#search_box:focus::-webkit-input-placeholder { /* WebKit browsers */
  color: white;
}
#search_box:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: white;
}
#search_box:focus::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: white;
}
#search_box:focus:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: white;
}

button {
  border-radius: 8px;
  height: 48px;

  font-family: Courgette, Sans-Serif;
  font-size: 22px;
  color: white;
  margin-left: 20px;
  border: none;
  background-color: red;
}

button:hover{
    background-color: blue;
    color: white;
}

#randomResults {
    position: relative;
    height: 100%;
    width: 100%;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

wikipedia-viewer-by-bocode.markdown

Wikipedia Viewer by BoCode

A Pen by Bojan on CodePen.

License.