FreeCodeCamp Wiki Viewer

In this example below you will see how to do a FreeCodeCamp Wiki Viewer with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by natertot12, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright natertot12 ©
  • HTML
  • CSS
  • JavaScript
    <br>
<p id="random" class="text-center"><a href="http://en.wikipedia.org/wiki/Special:Random">Random Wiki Page</a></p>
<div class="container">
  <input type="text" size="30" id="searchText" class="form-control center-block"/>
</div>
<br>
<br>
<button id="search" class="btn btn-primary center-block">Search</button>
<br>
<div class="sources">
  <ol>
  </ol>
</div>


/*Downloaded from https://www.codeseek.co/natertot12/freecodecamp-wiki-viewer-eJGXRK */
    li {
  list-style: none;
}


/*Downloaded from https://www.codeseek.co/natertot12/freecodecamp-wiki-viewer-eJGXRK */
    $(document).ready(function() {
  var apiUrl = "https://en.wikipedia.org/w/api.php?action=query&format=json&callback=?&prop=info&inprop=url&list=search&srsearch=";
  
  $("#search").click(function() {
    search($("#searchText").val());
    $(".sources ol").empty();
  });
  
  $("#searchText").keyup(function(event){
    if(event.keyCode == 13){
        $("#search").click();
    }
  });
  
  function search(item) {
    var fullUrl = apiUrl + item;
    $.ajax({
      url: fullUrl,
      dataType: 'json',
      type: 'GET',
      headers: {'Api-User-Agent': 'Example/1.0'},
      success: function(data) {
        for(var a = 0; a < 10; a++) {
          var link = "www.wikipedia.org/wiki/" + data.query.search[a].title.replace(/( )/g, "_");
          $(".sources ol").append("<li class='well'><p class='text-center'><a href='" + link + "'>" + (a + 1) + ". " + data.query.search[a].title + "</a></p>" + "<p>" + data.query.search[a].snippet + "</p></li>");
        }
      }
  });
  }
  
  
  
});

Comments