Wikipedia Viewer

What is a wikipedia viewer How do you make a wikipedia viewer? This script and codes were developed by Jimmy Lin on 14 February 2022, Monday.

How do I make an wikipedia viewer?
  1. Wikipedia Viewer Previews
  2. Wikipedia Viewer HTML Codes
  3. Wikipedia Viewer CSS Codes
  4. Wikipedia Viewer JS Codes
Wikipedia Viewer Previews

Wikipedia Viewer HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Wikipedia Viewer</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

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

<div class="container text-center">
   <h1> Wikipedia Viewer </h1>
   <h4>Free Code Camp Project</h4>
      <a href = "https://en.wikipedia.org/wiki/Special:Random" target="blank">
       <img src= http://www.udlcenter.org/sites/udlcenter.org/files/wikipedia.png >
      </a> 
      <input class="from-control" id="searchTerm">
      <button id="search" type="button" class="btn btn-primary"> Submit </button>
      
      <ul id = "output">
        
        
      </ul>
         
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

Wikipedia Viewer CSS Codes

h1, h4 {
  font-family: "Lobster", Times New Roman;
}

Wikipedia Viewer JS Codes

$(document).ready(function(){
  //When search is clicked run code
  $('#search').click(function(){
    // Gets search input
    var searchTerm= $('#searchTerm').val();
    //API url with searchTerm 
      var url = "https:en.wikipedia.org/w/api.php?action=opensearch&search="+ searchTerm + "&format=json&callback=?";
    
    $.ajax({
      type:"GET",
      url:url,
      async:false,
      dataType: "json",
      success: function(data){
       // get heading console.log(data[3][0]);
       // get description console.log(data[2][0]);
       // get link console.log(data[1][0]);
        
      $('#output').html('');  
      for (var i=0; i<data[1].length; i++){
        $('#output').prepend("<li><a href= "+data[3][i]+">"+data[1][i] +"</a><p>" +data[2][i]+"</p></li>");      
      }
        $("#searchTerm").val('');      
      },
      error: function(errorMessage){
        alert("Error")
      }
    });
    
    
    }); 
    $('#searchTerm').keypress(function(e){
      if(e.which==13){
      $('#search').click();
      }
     
  });
});
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.
HIDE NOW!