Wikipedia Random Article & Article Search

Wikipedia has a special feature i.e random articles. To generate or fetch random articles from Wikipedia, we can use [[Special:Random/Namespace]] into Wikipedia URL.

If we press Alt-Shift+X from the Wikipedia page, it will refresh the page and show a random article. In this tutorial, we are going to learn how to implement these random article features using jQuery and Bootstrap, and also we are going to implement Wikipedia search.

Wikipedia Random Article & Article Search

Let’s check the code first:

<!doctype html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

		<title>Wikipedia Random Article Generator & Article Search</title>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-12 mt-5">
					<h1>Wikipedia Random Article & Article Search</h1>
				</div>
			</div>
			
			
			<div class="form-group row">
				<div class="col-12 mt-5">
					<input type="search" id="query" class="form-control" placeholder="Search for an article">
				</div>
				<div class="col-12 mt-4 text-center">
					<button type="button" id="submitBtn" class="btn btn-success">Submit</button>
				</div>
			</div>
			
			<div class="row text-center">
				<div class="col-12 mt-2">
					<a class="btn btn-danger" href="" onclick="window.open('https://en.wikipedia.org/wiki/Special:Random')">Click here to get random article</a>
				</div>
			</div>
			<div class="row mt-5" id="output">
				
			</div>
		</div>
		
		<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
		<script>
			$(document).ready(function(){
			
				$('#submitBtn').click(function(e) {
					let no_of_result = 10;
					let title = "";
					let w_url = "";
					
					
					$('#output').html('');
					
					let query = $('#query').val();
					let url = "https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&utf8=1&srsearch=" + query + "&prop=info&inprop=url&callback=?";
					
					if(query){ 
						$.getJSON(url, function(data){
							
							if( data.query.searchinfo.totalhits === 0){
								$('#output').append('<div class="card w-100 text-center pb-2"><div class="card-body">No record found.</div></div>');
							}else{
								
								no_of_result =  data.query.search.length >= no_of_result ? no_of_result : data.query.search.length;
								
								for( i=0; i<no_of_result; i++){
									console.log(data.query.search[i].title);
									
									title = data.query.search[i].title;
									w_url = title.replace(/ /g, "_");
									
									$('#output').append('<div class="card w-100 text-center mb-4"><div class="card-body"><a href="https://en.wikipedia.org/wiki/'+ w_url +'" target="_blank"><h5 class="card-title">'+title+'</h5></a>'+ data.query.search[i].snippet +'</div></div>');
								}
							}
						});
					}else{
						$('#query').focus();
					}
				});
			});
		</script>
	</body>
</html>

In the above example, we have created a link i.e random article. When someone clicks on it, it will open a new browser tab with a random Wikipedia article.

<a class="btn btn-danger" href="" onclick="window.open('https://en.wikipedia.org/wiki/Special:Random')">Click here to get random article</a>

We have also added a search textbox and submit button. If we enter some keyword and click on submit button, it will show the search result like below.

Here we have concatenated our search string with the Wikipedia URL and fetch the result as a JSON object. After fetching the data, we parsed the result and show it in the preview window.

let url = "https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&utf8=1&srsearch=" + query + "&prop=info&inprop=url&callback=?";

About Ashis Biswas

A web developer who has a love for creativity and enjoys experimenting with the various techniques in both web designing and web development. If you would like to be kept up to date with his post, you can follow him.

Leave a Comment