FCC Wikipedia Viewer

fcc-wikipedia-viewer.markdown

FCC Wikipedia Viewer

A Pen by Stephen Peters on CodePen.

License.

index.html

<div class="container">
  <div class="row">
    <div class="col-lg-2 col-lg-offset-2">
      <br>
      <img src="https://res.cloudinary.com/dmkct6wfu/image/upload/v1500444250/imageedit_1_7800348300_vxibvx.png" class="img-responsive">
      <h1><i class="fa fa-wikipedia-w" aria-hidden="true"></i>Viewer</h1>
    </div>
  </div>

  <form class="form-horizontal" id="wikipedia_search">
    <div class="form-group">
      <div class="col-sm-8 col-sm-offset-2">
        <input type="text" id="user_input" class="form-control" placeholder="Enter a term here!">
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6 col-sm-offset-7">
        <p>
          <button type="submit" class="btn btn-primary btn-lg " id="search_button" value="">Search <i class="fa fa-wikipedia-w" aria-hidden="true"></i>
      </button>
          <a href="https://en.wikipedia.org/wiki/Special:Random"><button type="button" class="btn btn-primary btn-lg" id="random" value="">Random <i class="fa fa-wikipedia-w" aria-hidden="true"></i>
      </button></a>
        </p>
      </div>
    </div>
  </form>

  <div class="container">
    <div class="row">
      <div id="wikiSearchResults">
        <h2 id="results_header"></h2>
        <ul class='results'>
          
        </ul>
      </div>
    </div>
  </div>
    

script.js

var wikiViewer = function() {
  $("#results_header, .results").empty();
  var input = document.querySelector("#user_input");
  var api_url_endpoint = "https://en.wikipedia.org/w/api.php?format=json&origin=*&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch="+input.value;
  //"https://en.wikipedia.org/w/api.php?format=json&origin=*&callback=data&action=query&generator=search&gsrnamespace=0&gsrsearch=yankees&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max"
  
  //"/w/api.php?action=opensearch&format=json&origin=*&namespace=0%7C4&limit=10&profile=fuzzy&callback=&search="
  //'https://en.wikipedia.org/w/api.php?action=opensearch&format=jsonfm&limit=10&namespace=0&callback=&search='
  var url = ""; 
  
  $("#search_button").on("click", function(event){
    event.preventDefault();
    //$("#wikiSearchResults").empty();
    //$("#results_header").append("Your search for "+ input.value +" returned:")
  //var input = document.querySelector("#user_input");
  var url = encodeURI(api_url_endpoint + input.value);
  $.getJSON(url, function(data){
    //$("#results_header").append("Your search for "+ input.value +" returned:")
    $('#results_header, .results').html("");
    $("#results_header").append("Your search for "+ input.value +" returned:")
    $.each(data.query.pages, function(index, value){
      //console.log(data.query.pages);
      //console.log(index, value.thumbnail);
     
      $("ul.results").append(
       '<li><h3><a href=https://en.wikipedia.org/?curid='+value.pageid+'>'+value.title+'</a></h3><br><p>'+value.extract+'</p></li>'
      );
    });
    //use a for loop to console.log all of the results?
  });
  console.log(url);
  
  
});
  
   

  
};

wikiViewer();





 /*$("#search_button, #user_input").on("click keyup", function(){
  var input = document.querySelector("#user_input");
  var completed_url = encodeURI(api_url_endpoint + input.value);
  url = completed_url;
  console.log(completed_url);*/

scripts

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

style.css

body{
  background-color: #2fa549;
  height: 100%;
  width: auto;
}

h1{
  color: white;
}

ul {
  list-style: none;
}

styles

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