Create a Wikipedia Search using HTML CSS and JavaScript (original) (raw)

Last Updated : 26 Jul, 2024

In this article, we're going to create an application, for searching Wikipedia. Using HTML, CSS, and JavaScript, users will be able to search for articles on Wikipedia and view the results in a user interface. When the user inputs the search text into the textbox, the search result for the same will be shown to the user, and the user can click on the result and he will be redirected to the Wikipedia page for the same.

Prerequisites

Final Output

z15-(1)

Preview of Final Output

Approach

We'll design a user interface that includes an input field for search queries and an area to display the search results. Once a user enters their query and clicks the "Search" button, our JavaScript code will send a request to the Wikipedia API to fetch articles. The retrieved results will then be shown on the web page.

Start by creating an HTML file that includes an input field, and a container, for displaying the results and the required structure.
Use CSS to style the interface and make it visually appealing.
Implement JavaScript code to listen for when the "Enter" key is pressed.
When the key press event occurs, construct a URL for accessing the Wikipedia API with the specified search query.
Utilize AJAX to fetch **JSON data from the API.
Remove any search results. Dynamically generate HTML to display the new search results.

Project Structure

**Example: This example describes the basic implementation of the Wikipedia Search using HTML, CSS, and JavaScript.

HTML `

GeeksforGeeks

Wikipedia Viewer

CSS

/* Style.css */

body { text-align: center; }

#top { color: green; }

h1 { margin-top: 30px; }

p { background-color: rgb(153, 225, 155); }

#randomPage { color: white; }

input[type="text"] { border-radius: 15px; text-align: center; height: 50px; width: 600px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; }

input[type="text"]:focus { width: 100%; }

.searchTitle { font-weight: bold; margin-bottom: 3px; }

.searchResult { background-color: rgb(153, 225, 155); color: rgb(18, 17, 17); height: 60px; padding: 10px; margin: 2px; }

.searchResult:hover { cursor: pointer; background-color: white; color: black; }

` JavaScript ``

// Script.js

$(document).ready(function () { $(document).keypress(function (e) { if (e.which == 13) { let webLink = "...api.php?action=query&list=search&srsearch=" + document.getElementById( "search" ).value + "&utf8=&format=json"; $.ajax({ url: webLink, dataType: "jsonp", success: function ( data ) { $("div").remove( ".searchResult" ); for ( i = 0; i < data.query .search .length; i++ ) { let titleForResult = data.query .search[ i ].title; let snippetForResult = data.query .search[ i ].snippet; $( "#searchBox" ).append( '

` + titleForResult + "
" + snippetForResult + "

" ); } }, }); } }); });

**Output:

Create a Wikipedia Search using HTML CSS and JavaScript