The Wikipedia Summary Generator is a web application that utilizes Tailwind CSS, enabling users to search for a topic and receive a summary from Wikipedia. Users can input their topic of choice into the application’s search field, click on the “Search” button to retrieve the summary, and then download the summary as a text file. In addition, the application includes a “Clear” button that allows users to reset the input field and hide the summary and download buttons.
Approach to create Summary Generator Card
-
Begin with a basic HTML structure, including the
<!DOCTYPE html>
declaration,<html>
,<head>
, and<body>
tags. Import external resources like Tailwind CSS for styling. - Create a container div with Tailwind CSS classes for styling. Inside the container, include an input field for entering the topic to search on Wikipedia.
- Add buttons for searching, clearing, and downloading the summary. Use event listeners to trigger the search and clear functions.
- Use JavaScript to handle the Wikipedia API request and display the summary. Define a function to fetch the summary data from Wikipedia using the topic entered by the user.
-
Display the summary in a div with an id of “summary”. Use the
innerHTML
property to update the content of the div. Add a download button to allow users to download the summary as a text file.
Example: Implementation to design Wikipedia summary generator.
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< title >
Wikipedia Summary Generator
</ title >
< meta charset = "UTF-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< link href =
rel = "stylesheet" >
</ head >
< body class="bg-gray-100 min-h-screen flex
flex-col items-center justify-center">
< div class="bg-white p-8 rounded-lg shadow-md
w-full md:w-1/2 lg:w-1/3 border-2 border-green-600">
< h1 class = "text-3xl font-bold text-center mb-8" >
Wikipedia Summary Generator
</ h1 >
< div class = "flex flex-col mb-4" >
< label for = "topic" class = "text-lg font-semibold mb-2" >
Enter Topic:
</ label >
< input type = "text" id = "topic"
class="border border-gray-300 rounded-md
py-2 px-3 focus:outline-none">
</ div >
< div class = "flex justify-center space-x-4" >
< button id = "searchButton"
class="bg-green-500 text-white px-6 py-2
rounded-md focus:outline-none">
Search
</ button >
< button id = "clearButton"
class="bg-red-500 text-white px-6 py-2
rounded-md focus:outline-none">
Clear
</ button >
< button id = "downloadButton"
class="bg-blue-500 text-white px-6 py-2
rounded-md focus:outline-none hidden">
Download
</ button >
</ div >
< div id = "summary" class = "mt-8" ></ div >
</ div >
< script >
document.addEventListener('DOMContentLoaded', function () {
const searchButton = document.getElementById('searchButton');
const clearButton = document.getElementById('clearButton');
const topicInput = document.getElementById('topic');
const summaryDiv = document.getElementById('summary');
const downloadButton = document.getElementById('downloadButton');
searchButton.addEventListener('click', function () {
const topic = topicInput.value.trim();
if (topic === '') {
alert('Please enter a topic.');
return;
}
fetch(
.then(response => response.json())
.then(data => {
if (data.title && data.extract) {
summaryDiv.innerHTML = `
< h2 class = "text-xl font-semibold mb-4" >
${data.title}
</ h2 >
< p >${data.extract}</ p >
`;
downloadButton.classList.remove('hidden');
downloadButton.addEventListener('click',
function () {
const blob = new Blob([data.extract],
{ type: 'text/plain' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${data.title}.txt`;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
});
} else {
summaryDiv.innerHTML =
'< p >No summary found for the given topic.</ p >';
downloadButton.classList.add('hidden');
}
})
.catch(error => {
console.error('Error fetching Wikipedia data:', error);
summaryDiv.innerHTML =
`< p >Failed to fetch data.
Please try again later.</ p >`;
downloadButton.classList.add('hidden');
});
});
clearButton.addEventListener('click', function () {
topicInput.value = '';
summaryDiv.innerHTML = '';
downloadButton.classList.add('hidden');
});
});
</ script >
</ body >
</ html >
|
Output:
Recommended Articles