Add Wikipedia clone (#928)

* add wikipedia clone #852 * Update README.md #835 * Update README.md
Avdhesh-Varshney · Oct 18, 2024 · ce38ec1 · ce38ec1
1 parent 6d8db11
commit ce38ec1
Show file tree

Hide file tree

Showing 6 changed files with 441 additions and 2 deletions.
diff --git a/Vanilla-JS-Projects/Intermediate/Wikipedia-Clone/README.md b/Vanilla-JS-Projects/Intermediate/Wikipedia-Clone/README.md
@@ -0,0 +1,65 @@
+<h1 align='center'><b>💥 Wikipedia Clone 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+
+<div align='center'>
+
+  ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
+  ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
+  ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+  <p>Wikipedia clone is a web platform that mimics Wikipedia’s functionality, allowing users to create, edit, and manage articles /p>
+</div>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+<div >
+    <p>To run this project locally, follow these steps:
+
+1. Fork the repository.
+
+2. Clone the repository to your local computer
+
+3. Open the project folder in your preferred code editor, now you can view website in live.
+
+</p>
+</div>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+<!-- add the screenshot of the project (Mandatory) -->
+
+![image](screenshot.webp)
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Aman Verma</i></b></h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/aman-verma-47b626294/'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/amanver45'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
diff --git a/Vanilla-JS-Projects/Intermediate/Wikipedia-Clone/index.html b/Vanilla-JS-Projects/Intermediate/Wikipedia-Clone/index.html
@@ -0,0 +1,25 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wiki Clone</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="header-container">
+        <h1>Search Wikipedia</h1>
+        <span id="theme-toggler">Light</span>
+      </div>
+
+      <form id="search-form">
+        <input type="text" id="search-input" placeholder="Enter search term" />
+        <button type="submit">Search</button>
+      </form>
+
+      <div id="search-results"></div>
+    </div>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Vanilla-JS-Projects/Intermediate/Wikipedia-Clone/screenshot.webp b/Vanilla-JS-Projects/Intermediate/Wikipedia-Clone/screenshot.webp
diff --git a/Vanilla-JS-Projects/Intermediate/Wikipedia-Clone/script.js b/Vanilla-JS-Projects/Intermediate/Wikipedia-Clone/script.js
@@ -0,0 +1,82 @@
+const searchForm = document.getElementById("search-form");
+const searchInput = document.getElementById("search-input");
+const searchResults = document.getElementById("search-results");
+
+// Theme toggler elements
+const themeToggler = document.getElementById("theme-toggler");
+const body = document.body;
+
+async function searchWikipeida(query) {
+  const encodedQuery = encodeURIComponent(query);
+  const endpoint = `https://en.wikipedia.org/w/api.php?action=query&list=search&prop=info&inprop=url&utf8=&format=json&origin=*&srlimit=10&srsearch=${encodedQuery}`;
+
+  const reponse = await fetch(endpoint);
+
+  if (!reponse.ok) {
+    throw new Error("Faild to fetch search results form wikipedia API.");
+  }
+
+  const json = await reponse.json();
+  return json;
+}
+
+function displayResults(results) {
+  // Remove the loading spinner
+  searchResults.innerHTML = "";
+
+  results.forEach((result) => {
+    const url = `https://en.wikipedia.org/?curid=${results.pageid}`;
+    const titleLink = `<a href="${url}" target="_blank" rel="noopener">${result.title} </a>`;
+    const urlLink = `<a href="${url} class="result-link" target="_blank" rel="noopener">${url}</a>`;
+
+    const resultItme = document.createElement("div");
+    resultItme.className = "result-item";
+    resultItme.innerHTML = `
+        <h3 class="result-title">${titleLink}</h3>
+        ${urlLink}
+        <p class="result-snippet">${result.snippet}</p>
+        `;
+
+    searchResults.appendChild(resultItme);
+  });
+}
+
+searchForm.addEventListener("submit", async (e) => {
+  e.preventDefault();
+
+  const query = searchInput.value.trim();
+
+  if (!query) {
+    searchResults.innerHTML = "<p>Please enter a valid search term. </p>";
+    return;
+  }
+
+  searchResults.innerHTML = "<div class='spinner'>Loading ... </div>";
+
+  try {
+    const results = await searchWikipeida(query);
+
+    if (results.query.searchinfo.totalhits === 0) {
+      searchResults.innerHTML = "<p>No results found. </p>";
+    } else {
+      displayResults(results.query.search);
+    }
+  } catch (error) {
+    console.error(error);
+    searchResults.innerHTML = `<p>An error occured while searching. Please try again later. </p>`;
+  }
+});
+
+// Event listener for the theme toggler
+themeToggler.addEventListener("click", () => {
+  body.classList.toggle("dark-theme");
+  if (body.classList.contains("dark-theme")) {
+    themeToggler.textContent = "Dark";
+    themeToggler.style.background = "#fff";
+    themeToggler.style.color = "#333";
+  } else {
+    themeToggler.textContent = "Light";
+    themeToggler.style.border = "2px solid #ccc";
+    themeToggler.style.color = "#333";
+  }
+});