Merge pull request #310 from thevijayshankersharma/wikipedia-api

Added wikipedia api
dishamodi0910 · Jul 20, 2024 · c0f8d7b · c0f8d7b
2 parents 20c2daf + d3478f1
commit c0f8d7b
Show file tree

Hide file tree

Showing 6 changed files with 224 additions and 0 deletions.
diff --git a/Existing_API_Collection/README.md b/Existing_API_Collection/README.md
@@ -21,6 +21,7 @@
 |[TranslatorAPI](./TranslatorAPI/)|This API helps to translate text with OTHER languages|
 |[JSON_Placeholder_API](./JSON_Plaeholder_API/)| this api is used to test basic crud operations on fake data posts |
 |[Gold Silver Price](./Gold,silver_price_API/)|This API helps you check realtime price of gold and silver for each categories |
+|[Wikipedia API](./Wikipedia_API/)| Demonstrates a webpage using the Wikipedia API to fetch and display summarized information based on user input.|
 |[GeoAPI](./GeoAPI/)| GeoAPI is a simple RESTful API that allows you to convert addresses to geographic coordinates (latitude and longitude) and vice versa. This API is built using Node.js and Express.|
 |[Books API](./Books_API/)| The Google Books API allows developers to access a wealth of information about books, including their titles, authors, publishers, publication dates, and descriptions. |
 |[Currency Converter API](./Currency_Converter_API/)| Currency_Converter is a simple RESTful API that allows you to convert currency values to different currency|

diff --git a/Existing_API_Collection/Wikipedia-API/README.md b/Existing_API_Collection/Wikipedia-API/README.md
@@ -0,0 +1,36 @@
+## Wikipedia API
+
+### Overview
+This project demonstrates a simple webpage that utilizes the Wikipedia API to allow users to search and retrieve information about topics of interest. The webpage provides a user-friendly interface where users can input a search term, and upon submission, it fetches relevant data from Wikipedia's API asynchronously.
+
+### Features
+- **Search Functionality:** Users can enter a search term (e.g., a person's name) and retrieve summarized information from Wikipedia.
+- **Dynamic Content Display:** The results are dynamically displayed in the `#results` section of the webpage, including the title, thumbnail image (if available), description, and extract.
+- **Error Handling:** Provides error messages in case of invalid search terms or API request failures.
+- **Responsive Design:** The webpage layout adjusts responsively across different devices for optimal viewing.
+
+### Tech Stack
+- **HTML:** Structuring the webpage.
+- **CSS:** Styling the webpage for a clean and user-friendly interface.
+- **JavaScript:** Implementing the API request, handling user interactions, and dynamically updating the webpage content.
+
+### Setup
+To run this project locally:
+1. Clone the repository.
+2. Open `index.html` in your web browser.
+
+### Usage
+1. Enter a search term (e.g., "Albert Einstein") into the search input field.
+2. Click the "Search" button or press Enter to fetch information from Wikipedia.
+3. View the retrieved information displayed in the results section.
+
+### Future Enhancements
+- Implement pagination for search results.
+- Enhance styling and user interface elements.
+- Integrate more Wikipedia API features for expanded functionality.
+
+### Demo
+![Output](asset/image.png)
+
+### Reference
+- [Wikipedia API Documentation](https://www.mediawiki.org/wiki/API:Main_page)
diff --git a/Existing_API_Collection/Wikipedia-API/asset/image.png b/Existing_API_Collection/Wikipedia-API/asset/image.png
diff --git a/Existing_API_Collection/Wikipedia-API/index.html b/Existing_API_Collection/Wikipedia-API/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Wikipedia API</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <center>
+    <header>
+        <h1>Explore Wikipedia with API</h1>
+      </header>
+
+      <main>
+        <section id="person-info">
+          <form id="search-form">
+            <label for="person-input">Enter :</label>
+            <input type="text" id="person-input" placeholder="Type a name">
+            <button type="submit">Search</button>
+          </form>
+        </section>
+
+        <section id="results"></section>
+      </main>
+
+      <footer>
+        <p>&copy; 2024 Wikipedia API Demo</p>
+      </footer>
+  </center>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Existing_API_Collection/Wikipedia-API/script.js b/Existing_API_Collection/Wikipedia-API/script.js
@@ -0,0 +1,50 @@
+window.onload = () => {
+    const resultsDiv = document.getElementById("results");
+    const searchForm = document.getElementById("search-form");
+    const personInput = document.getElementById("person-input");
+
+    searchForm.addEventListener("submit", (event) => {
+        event.preventDefault(); // Prevent form submission
+
+        const searchTerm = personInput.value.trim();
+        if (searchTerm === "") {
+            resultsDiv.innerHTML = "<p>Please enter a valid name.</p>";
+            return;
+        }
+
+        fetchData(searchTerm, (json) => {
+            if (json.error) {
+                resultsDiv.innerHTML = `<p>Error: ${json.error.info}</p>`;
+            } else {
+                resultsDiv.innerHTML = `
+                    <h2>${json.title}</h2>
+                    ${json.thumbnail ? `<img src="${json.thumbnail.source}" alt="Thumbnail">` : ''}
+                    <p>${json.description}</p>
+                    <p>${json.extract}</p>
+                `;
+            }
+        });
+    });
+
+    function fetchData(term, callback) {
+        const xhr = new XMLHttpRequest();
+        xhr.open('GET', `https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(term)}`);
+
+        xhr.onload = () => {
+            if (xhr.status === 200) {
+                const data = JSON.parse(xhr.responseText);
+                callback(data);
+            } else {
+                const errorData = { error: { info: `Request failed with status ${xhr.status}` } };
+                callback(errorData);
+            }
+        };
+
+        xhr.onerror = () => {
+            const errorData = { error: { info: "Network error occurred." } };
+            callback(errorData);
+        };
+
+        xhr.send();
+    }
+};
diff --git a/Existing_API_Collection/Wikipedia-API/style.css b/Existing_API_Collection/Wikipedia-API/style.css
@@ -0,0 +1,102 @@
+/* Reset default margin and padding */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  /* Body styles */
+  body {
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    background-color: #f0f0f0;
+    padding: 20px;
+  }
+
+  /* Header styles */
+  header {
+    text-align: center;
+    margin-bottom: 20px;
+  }
+
+  header h1 {
+    font-size: 2.5em;
+    color: #333;
+  }
+
+  /* Main styles */
+  main {
+    max-width: 800px;
+    margin: 0 auto;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+
+  /* Form styles */
+  form {
+    margin-bottom: 20px;
+  }
+
+  form label {
+    font-size: 1.1em;
+    color: #333;
+    display: block;
+    margin-bottom: 5px;
+  }
+
+  form input[type="text"] {
+    width: 100%;
+    padding: 10px;
+    font-size: 1em;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+
+  form button {
+    padding: 10px 20px;
+    font-size: 1em;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  form button:hover {
+    background-color: #0056b3;
+  }
+
+  /* Results styles */
+  #results {
+    margin-top: 20px;
+  }
+
+  #results h2 {
+    font-size: 1.8em;
+    color: #333;
+    margin-bottom: 10px;
+  }
+
+  #results img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+    margin-bottom: 10px;
+  }
+
+  #results p {
+    font-size: 1.1em;
+    color: #666;
+    margin-bottom: 10px;
+  }
+
+  /* Footer styles */
+  footer {
+    text-align: center;
+    margin-top: 20px;
+    color: #666;
+    font-size: 0.9em;
+  }
+