FCC Wikipedia Viewer Project

fcc-wikipedia-viewer-project.markdown

FCC Wikipedia Viewer Project

Just type in search term and the app will pull up 5 Wikipedia entries on that term. It will include a brief description and a link to the actual Wikipedia page for that term. Clicking on the large Wikipedia icon will link to a random Wikipedia page. The Enter key also works to trigger your search.

A Pen by Benjamin on CodePen.

License.

index.html

<div class='container'>
<div class='d-flex justify-content-center'>
<div><a href='https://en.wikipedia.org/wiki/Special:Random' target="_blank"><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Wikipedia_svg_logo.svg/500px-Wikipedia_svg_logo.svg.png' alt='wiki icon' class='img'/></a>
  </div>
  <form class='form-inline'>
<label class='sr-only' for='wikisearch'>Search Wikipedia...</label>
  <div class='input-group m4'>
  <div class='input-group-addon' style='border-radius: 50px 0 0 50px;'><i class="material-icons mag">search</i><span>Click globe<br>for a suprise</span>
</div>
    <input type='search' class='form-control form-control-lg' id='term' placeholder='Search Wikipedia...'>
  <button type='submit' class='btn btn-lg' id='wikisearch' style='border-radius: 0 50px 50px 0;'>press</button>  
  </div>
</form>

</div>
  </div>
<div class='container'>
<div class='d-flex justify-content-center'>
  <div id='wikilinks'>
    </div>
  </div>
</div>
<footer>
  Page Design by ben.Jam(In);
  </footer>

script.js

$(document).ready(function(){
  
  //click on press button
  $('#wikisearch').click(function(e){
  e.preventDefault();//block new window load to get to api
    var term = $('#term').val();//what user enters in field
console.log(term);
    var wikiApi = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + term + "&limit=5&format=json&callback=?";
   //api request format with limit for 5 results and json
    
    $.ajax({
      type: "GET",
      url: wikiApi,
      async: false,
      dataType: "json",
      success: function(data){
      //the actual call with ajax
        $('#wikilinks').html('');
        //clears screen ahead of prepend 
        for(var i=0; i < data[1].length; i++){
        //loops through data array
        $('#wikilinks').prepend("<div class='card animated zoomInDown'><div class='card-block'><h3 class='card-title' ><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Wikipedia_svg_logo.svg/500px-Wikipedia_svg_logo.svg.png' alt='wiki icon' height='80px' width='80px'/> " + data[1][i] + "</h3><p class='card-text'> " + data[2][i] + " </p> <a href=" + data[3][i] + " class='card-link' target='_blank'> " + data[1][i] + " </a> </div> </div>");
        }
        //adds data in card form
        $('#term').val('');
        //clears search field
      },
      error: function(error){
        alert('error, something bad happened');
      }
    });
  
    $('#term').keypress(function(e){
      if(e.which==13){
        $('#wikisearch').click();
      }
   //sets enter key to work as well
      
      });
  
  });
  
  
  
});

scripts

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

style.css

body {
  background-color: grey;
}

#wikisearch, #term{
  font-size: 40px;
  font-family: "Love Ya Like A Sister", sans-serif;

}

#wikisearch{
  cursor: pointer;
}

.mag{
  font-size: 48px;
  
}
.d-flex{
  margin-top: 00px;
}
.img{
  height: 300px;
  width: 300px;
  margin-right: 60px;
}

.card{
  margin: 20px 0 20px 0;
  border-radius: 20px;
  box-shadow: 10px 10px 5px black;
  font-family: "Love Ya Like A Sister", sans-serif;
  -webkit-animation-duration: 2s;
        animation-duration: 2s;
  
}
.card-title{
  font-size: 50px;
  font-weight: bold;
}
.card-link{
  font-size: 32px;
}

.card-text{
  font-size: 22px;
}
span{
  padding-left: 10px;
}

footer{
  text-align: center;
  font-family: "Love Ya Like A Sister", sans-serif;
  margin: 0 20px 20px 0;
  font-size: 20px;
  position: relative;
  top: 300px;
  
}

styles

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