renx777
12/30/2017 - 1:25 PM

wiki viewer

wiki viewer

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
body{
    height:100%;
    width:100%;
    background-color:#3F2860;
    font-family:Josefin Slab,serif;
  }
  h1{
    color:white;
    text-align:center;
    ;
  }
  .container{
   background-color:#80628B;
    margin-top:10px;
    font-size:20px;
    color:white;
    
  }
  
  input{
    font-size:30px;
    width:0px;
    height:40px;
  visibilty:hidden;
    color:black;
    
   
    border:0px solid transparent;
    transition:0.1s;
    margin-bottom:20px;
     background-color:#665BC4;
  }
  .x{
    width:200px;
    height:45px;
    transition:0.1s;
    background-color:white;
    border:5px solid #3F2860;
  visibility:initial;
  }
  html, body{height:100%; margin:0;padding:0}
   
  .container-fluid{
    margin-top:50px;
    display:table;
  
    
    
  }
   
  .row-fluid{ display:table-cell; vertical-align: middle;
  background-color:#665BC4;}
   
  .centering {
    float:none;
    margin:0 auto;
  }
  
  .fa{
  color:white;
    margin-top:10px;
    cursor:pointer;
  }
  .fa-search{
    float:right;
    
  }
  a{
    font-size:30px;
  font-style:bold;
   color:white;
    background-color:#3F2860;
  }
  a:hover{
    color:yellow;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
$(document).ready(function () {





  function getWiki() {
    // on press of enter,get the value typed in the input 
    $('input').toggleClass('x')
    $('#result').empty();
    var fd = $('#d').val()

    //  call wiki api with input serach 
    $.getJSON('https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=20&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=' + fd + '&callback=?', function (data) {
      console.log(data.query.pages)
      var obj = data.query.pages;

      //  going through response data,to make it presentable for our application
      for (var key in obj) {
        console.log(key)

        $('#result').append('<div class="container">' +
          '<div class="row"><div class="col-md-12">' +
          '<a href=https://en.wikipedia.org/?curid=' + key + '>' + obj[key].title + ':</a>' +
          '</div></div>' +
          '<div class="row"><div class="col-md-12">' +
          '<p>' + obj[key].extract + '</p></div></div></div>');
        $('a').attr('target', '_blank')
        $('#d').val("")
      }

     

    })
  }

  $('#d').keypress(function (e) {
    if (e.keyCode == 13) {

      getWiki()

    }
  });



  $('.fa-search').on('click', function () {

    getWiki()




  })
// get random article from wikpedia
  $('.fa-random').on('click', function () {
    var win = window.open('https://en.wikipedia.org/wiki/Special:Random', '_blank')
    win.focus();
  })

})
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>wikiViewer</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>
   
    </script>
   
    
</head>
<body>
       
                
               <div class="container-fluid">
                 <div class="row-fluid"><div class="col-md-12">
                   
                   <h1>Wiki Viewer</h1>
               <i class="fa fa-random fa-3x" data-toggle="toottip" title="Click to read a random article"></i>
                   <input id="d" type="text">
                   <i class="fa fa-search fa-3x"></i>
                 <br>
                 
                   
                 </input>
                   
                   </div></div></div>
                 
               
               <div id="result"></div>
               
               <script>
                $(document).ready(function(){
                    $('[data-toggle="tooltip"]').tooltip(); 
                });
                </script>
</body>
</html>