FreeCodeCamp - Build Wikipedia Viewer

freecodecamp-build-wikipedia-viewer.markdown

FreeCodeCamp - Build Wikipedia Viewer

A Pen by Maureen Hernandez on CodePen.

License.

index.html

<div class="container-fluid">
  
  <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">
    <button class="btn btn-block"> Get a random result</button>
  </a>
  
  <div class="search">
    <form class="form-inline">
        <input type="text" class="form-control" id="input" placeholder="I'm batman"/> 
      <button class="btn btn-primary" id="search" type="submit">Search</button>
    </form>
 </div>
    
    <div id="results"> </div>
    
    <div class="well">Please note this page uses wikipedia API so the results are based on real data</div>

  
</div>

script.js

$(document).ready(function(){
  
  validate();  
    
  function validate(){
    if ($("#input").val().length > 0 ){
      $("#search").prop("disabled", false);
    }else{
      $("#search").prop("disabled", true);
    }
  }
 
  $("#input").change(validate);
 
  
  
  $("#search").on("click", function(event){
    var textForSearch = encodeURIComponent($("#input").val());
   
    var apiURL = 'https://en.wikipedia.org/w/api.php?action=query&prop=extracts&exlimit=max&format=json&exsentences=1&exintro=&explaintext=&generator=search&gsrlimit=10&gsrsearch='+textForSearch+'&callback=?'
    
    $.getJSON(apiURL, function(json){
      var htmlStr = '';
      var result = json.query.pages;
      var pages = Object.keys(result);
      
      pages.forEach(function(article){
        htmlStr +='<div class="col-xs-12 page-result">';  
        var link = result[article].pageid
        htmlStr += '<a href="'+'https://en.wikipedia.org/?curid='+link+'">';
        
        var title = result[article].title;
        htmlStr += '<h3>'+ title +'</h3>';
        var content = result[article].extract;
        htmlStr += '<p>'+ content +'</p>';
        htmlStr += '</a></div>';
     });
      $("#results").html(htmlStr);
    }); //getJson
    
    $(".well").remove();
    
  event.preventDefault();
  }); //onClick 
    
});

scripts

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

style.css

#results{
    clear: both;
    overflow: hidden;
}

.search{
  padding: 20px 10px;
}

.page-result{
    border-radius: 15px;
    border: solid 3px white;
    background-color: #f7f7f7;
}
.well{
  text-align:center;
  position: absolute;
  bottom: 0;
  width:95%;
}

styles

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