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.
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/bootstrap@4.6.0/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/bootstrap@4.6.0/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=?";
