Wikipedia Viewer

index.html

<div class="jumbotron text-center">
  <h1 class="animated zoomIn">Wikipedia Viewer</h1>
</div>
<div class="container-fluid">
     <div class="row">
        <div class="col-sm-6">
          <div class="container-fluid">
  <figure>
    <img class="img-responsive animated slideInLeft" src="http://res.cloudinary.com/dfqxzvppi/image/upload/v1500145114/comgirl_mug9wl.jpg" alt="girl"><figcaption class="animated lightSpeedIn"><form>
    <div class="input-group">
      <input type="text" class="form-control" id="sBox" placeholder="Tell me!" name="search">
      <div class="input-group-btn">
        <button class="btn btn-info" id ="sButton" type="button"><i class="fa fa-search" aria-hidden="true"></i>
</button>
       </div>
    </div>
  </form>
    <form>
  <p>or maybe...</p>
      <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank" style="text-decoration:none" id= "role" class="btn btn-info" role="button">Do you feel lucky today?</a>
      </form>
        </figcaption>
</figure>
     </div>
     </div>
       <div class="col-sm-6">
      <ul id="reply"></ul>
      </div>
       </div>
       </div>
<div class="panel-footer text-center"> <p>Created by: Paulina Fischer</p><br><p>Library from 
<a href="https://www.youtube.com/channel/UCLG_lIjyLPqjN-KtHK_aE-Q" target="_blank">Happy Coder</a> and freeCodeCamp</p></div>
   </div> 
 
  

script.js

$(document).ready(function() {
  $("#sButton").on("click",function(){
    $("#reply").empty();
    var sBox = $("#sBox").val();
    var api = "https://en.wikipedia.org/w/api.php?action=opensearch&search="  + sBox + "&limit=10&namespace=0&format=json&callback=?";
    $.getJSON(api, function(data){
      for (var i = 0; i < data[1].length; i++) {
      $("#reply").append("<li><h2><a target='_blank' href=" + data[3][i] + ">" + data[1][i] + "</a></h2>" + "<p>" + data[2][i] + "</p></li>");    
   }
    });
  });
}); 

scripts

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

style.css

body{
  background:pink;
}
figcaption{
    border-radius: 1px 100px 100px 100px;
    background: rgba(255, 255, 255, 0.8);
  border-style: solid;
  border-color:black;
    padding:30px; 
    width:auto;
    height:auto;
    position:absolute;
    bottom: 140px;
    right: 18px;
    font-family: 'Swanky and Moo Moo', cursive;
  color:black;
  margin:15px;
}
img {
  width:100%;
  height:auto;
   position: relative;
    left: 0px;
    top: 0px;
    z-index: -1;
  border-style: solid;
  border-color:black;
}
.btn {
  background: rgba(255, 255, 255, 0.8);
  color:black;
  border-color:black;
  width:100%;
}
#role{
  color:black;
  border-color:black;
}
#role:hover {
  background-color:black;
  border-color:black;
}
#sButton:hover,#sButton{
  background:black;
  color:white;
  border-color:black;
  cursor:pointer;
}
#sBox{
  border-color:black;
}
.jumbotron{
  background-color:#DC143C;
}
h1 {
  font-family: 'Alfa Slab One', cursive;
  color:whitesmoke;
  text-shadow: 3px 2px black;
  font-size:50px;
}
.panel-footer{
background:white;
}
li{
font-family: 'Swanky and Moo Moo', cursive;
  color:black;
}
a:link{
  color:#CD5C5C;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Anton|Caveat+Brush|Gloria+Hallelujah|Indie+Flower|Kalam|Passion+One|Swanky+and+Moo+Moo"rel="stylesheet"" rel="stylesheet" />

wikipedia-viewer.markdown

Wikipedia Viewer

freeCodeCamp Intermediate front end develoment proyect.

A Pen by Paulina Fischer on CodePen.

License.