Wikipedia Viewer

index.html

<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">

<div id="main" class="marg text-center">
  <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1200px-Wikipedia-logo-v2.svg.png" width="170px" >
  
  <h1> Wikipedia Viewer</h1>
  <div class="text-center">
  <input type="text" id="search" placeholder="search here">
  </div>
  <a class="btn btn-default" id="randombtn" href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Random View</a>
</div>

  <div id="results"></div>

  <footer id="footer">Coded By <a href="https://www.freecodecamp.com/mukul09" target="_blank"> <strong>Mukul Agrawal</strong>
    
  </footer>

script.js

/*$.ajax({
      url: 'https://en.wikipedia.org/w/api.php',
      dataType: 'jsonp',
      data: {
        action: 'query',
        format: 'json',
        prop: 'extracts',
        exchars: '200',
        exlimit: 'max',
        explaintext: '',
        exintro: '',
        pilimit: 'max',
        rawcontinue: '',
        generator: 'search',
        gsrsearch: searchQuery,
        gsrnamespace: '0',
        gsrlimit: '10'
      },
      success: function(data) {
        $results.empty();
        var pages = data.query.pages;
        console.log(pages);
        for (var page in pages) {
          $results.append(
            '<a href="https://en.wikipedia.org/wiki/' + pages[page].title + '" target="_blank">' +
              '<article id="result">' + 
                '<h2>' + pages[page].title + '</h2>' +
                '<p>' + pages[page].extract + '</p>' +
              '</article>' +
            '</a>'
          );
        }
      }
    });
*/


$(document).ready(function() {
  var $search = $('#search');
  var $results = $('#results');

// For autocomplete if I ever get around to implementing it
/*$.ajax({
  url: "http://en.wikipedia.org/w/api.php",
  dataType: "jsonp",
  data: {
    'action': "opensearch",
    'format': "json",
    'search': $search.val()
  }*/
    
  $search.keyup (function() {
    var searchQuery = $search.val();
    console.log(searchQuery);
    $.ajax({
      url: 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=' + searchQuery,
      dataType: 'jsonp',
      
      success: function(data) {
        $results.empty();
        var pages = data.query.pages;
        console.log(pages);
        if(pages==="undefined")
          {
            alert("please! try something defferent");
          }
        else{
        for (var page in pages) {
          $results.append(
            '<div class="single"><a href="https://en.wikipedia.org/wiki/' + pages[page].title + '" target="_blank">' +
              '<article id="result">' + 
                '<h2>' + pages[page].title + '</h2>' +
                '<p>' + pages[page].extract + '</p>' +
              '</article>' +
            '</a></div>'
          );
        }
      }
      }
    });
  });
});

scripts

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

style.css

#main{
  margin-top:30px;
}
#search{
  margin-top:20px;
}

h1{
  font-family:acme;
  font-size:60px;
}

body{
  font-family:acme;
}
button,input{
  font-size:18px;
}

.btn{
  font-size:18px;
}

#results{
  margin-left:40px;
  margin-right:40px;
  
}

a{
  color:black; 
  display:block;
}

.single{
  width:100%;
    background-color:#CCC;  
}

#randombtn{
  background-color:black;
  color:white;
  margin-top:20px;
  
}
#randombtn:hover{
  background-color:black;
  box-shadow: 5px 5px 5px grey;
}

#search{
  border-style:solid;
}

h1,footer{
  color:black;
}

#footer{
  position:relative;
 bottom:-100px;
 left:0;
  right:0;
  text-align:center;
  
}

a, a:hover, a:active, a:visited, a:focus {
    text-decoration:none;
}

a:hover{
  color:blue;
}

input:focus {outline:0;}

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/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

wikipedia-viewer.markdown

Wikipedia Viewer

A Pen by Mukul Agrawal on CodePen.

License.