Wikipeida Viewer

In this example below you will see how to do a Wikipeida Viewer with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by --Gordon--, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright --Gordon-- ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Wikipeida 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>

  <body>
 <link href="https://fonts.googleapis.com/css?family=Pauta One" rel="stylesheet" typ="css/text">
 <div class="container text-center">
  <h1>Search for anything on Wikipedia</h1><br>
  <input class="form-control" type="text" id="searchTerm" /><br><br>
  <button id="search" type="button" class="btn btn-primary" target="_blank">Search</button><br><br>
	<!-- random article -->
  <p><a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">
    <button type="button" id="random" class="btn btn-primary">Go Random</button></a></p>
   <ul id="output">

   </ul>
 </div>
 <!-- container -->
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/--Gordon--/wikipeida-viewer-JyLVqK */
body {
	background-image: url("");
	background-repeat: no-repeat;
	background-color: #203556;
	color: white;
	padding: 100px; 
	font-family: "Pauta One", sans-serif;
}

#searchTerm {
	width: 50%;
	margin: 0px 280px;
	border: 5px solid #7c7f84;
  border-radius: 10px;
}

#search {
	border: 5px solid #7c7f84;
  border-radius: 30px;
}

#random {
	border: 5px solid #7c7f84;
  border-radius: 30px;
}






/*Downloaded from https://www.codeseek.co/--Gordon--/wikipeida-viewer-JyLVqK */
/* This programme allows the user to search for any Wikipedia value and 
receive 10 immediate results, using the Wikipeida API. It also enables
a random value request */ 


$(document).ready(function(){
	// run call when search button is clicked
	$("#search").click(function(){
		var searchTerm = $("#searchTerm").val();
		// API url with searchTerm
		var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&format=json&callback=?";
		
		// call Wikipedia API for data
		$.ajax({
				type: "GET", 
				url: url, 
				async: false, 
				dataType: "json", 
				success: function(data){					
 				// start with fresh and blank info
					$("#output").html(""); 
					// iterate through data from API and output to screen
					for (var i = 0; i < data[1].length; i++){
						$("#output").prepend("<br><div class='well'><a target='_blank' href= " + data[3][i] + data[1][i] + "</a><p>" + data[2][i] + "</p></div>");
					}
				$("#searchTerm").val("");	
				}, 
				error: function(errorMessage){
					alert("Could not retrieve data");
				}
		});
	});
	// make enter key trigger search function as well
	$("#searchTerm").keypress(function(e){
		if (e.which == 13){
			$("#search").click();
		}
	})
})

Comments