Added Search from here Project to Basic Vanilla JS

Vanilla-JS-Projects/Basic/Search-From-Here/README.md

@@ -0,0 +1,80 @@
+<h1 align='center'><b>💥 Search From Here 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
+
+<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) 
+  <!-- ![Bootstrap](https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge&logo=bootstrap&logoColor=white) -->
+  ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 
+  <!-- ![jQuery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white) -->
+  <!-- ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) -->
+  <!-- ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white) -->
+  <!-- ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) -->
+  <!-- ![Web3.js](https://img.shields.io/badge/web3.js-F16822?style=for-the-badge&logo=web3.js&logoColor=white) -->
+  <!-- ![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB) -->
+  <!-- ![Angular.js](https://img.shields.io/badge/angular.js-%23E23237.svg?style=for-the-badge&logo=angularjs&logoColor=white) -->
+  <!-- ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) -->
+  <!-- ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white) -->
+  <!-- ![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D) -->
+  <!-- ![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white) -->
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+  <!-- <p>Add Description of the project</p> -->
+    <p>Search From Here is a user-friendly tool that allows you to search multiple platforms—Google, Amazon, YouTube, and Wikipedia—from one interface. The project features a responsive design that adapts to different screen sizes, displaying search boxes in a neat grid layout.</p>
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+<!-- Add steps how to run this project -->
+- Fork this project and run the `index.html` file directly.
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+<!-- add the screenshot of the project (Mandatory) -->
+![image](https://github.com/user-attachments/assets/2a09643c-3751-4b5e-a239-3d1287c66b32)
+
+
+
+## :zap: Working Video 📹
+<!-- directly add the link of video (If, possible) -->
+
+https://github.com/user-attachments/assets/3127ff07-b9c3-4655-8472-68ecacf8d5c3
+
+
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Jomana Tantawy</i></b> 👦</h4>
+<p align='center'>
+  <a href='www.linkedin.com/in/jomana-tantawy-b516b0315'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/JomanaMahmoud'>
+    <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>

Vanilla-JS-Projects/Basic/Search-From-Here/index.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Search From Here</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet">
+  </head>
+  <body>
+    <header>
+      <h2>Search From Here</h2>
+    </header>
+    <div class="container">
+      <div class="box">
+        <h3>Google</h3>
+        <div class="Seach-box">
+          <input type="search" placeholder="Search">
+          <img src="SearchIcon.webp" alt="SearchIcon">
+        </div>
+      </div>
+      <div class="box">
+        <h3>Amazon</h3>
+        <div class="Seach-box">
+          <input type="search" placeholder="Search">
+          <img src="SearchIcon.webp" alt="SearchIcon">
+        </div>
+      </div>
+      <div class="box">
+        <h3>Youtube</h3>
+        <div class="Seach-box">
+          <input type="search" placeholder="Search">
+          <img src="SearchIcon.webp" alt="SearchIcon">
+        </div>
+      </div>
+      <div class="box">
+        <h3>Wikipedia</h3>
+        <div class="Seach-box">
+          <input type="search" placeholder="Search">
+          <img src="SearchIcon.webp" alt="SearchIcon">
+        </div>
+      </div>
+    </div>
+    <footer><p>Developed by Jomana Tantawy</p></footer>
+    <script src="script.js"></script>
+  </body>
+</html>

Vanilla-JS-Projects/Basic/Search-From-Here/script.js

@@ -0,0 +1,28 @@
+document.addEventListener("DOMContentLoaded", function() {
+    // Search URLs for each platform
+    const searchUrls = {
+      Google: "https://www.google.com/search?q=",
+      Amazon: "https://www.amazon.com/s?k=",
+      Youtube: "https://www.youtube.com/results?search_query=",
+      Wikipedia: "https://en.wikipedia.org/wiki/"
+    };
+
+    // Add click event to each search icon
+    document.querySelectorAll(".box").forEach(box => {
+      const searchInput = box.querySelector("input[type='search']");
+      const searchIcon = box.querySelector("img");
+
+      searchIcon.addEventListener("click", () => {
+        const platform = box.querySelector("h3").innerText;
+        const query = searchInput.value.trim();
+
+        if (query) {
+          const searchUrl = searchUrls[platform] + encodeURIComponent(query);
+          window.open(searchUrl, "_blank");
+        } else {
+          alert("Please enter a search term.");
+        }
+      });
+    });
+  });
+

Vanilla-JS-Projects/Basic/Search-From-Here/style.css

@@ -0,0 +1,105 @@
+/* General Styles */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+  }
+
+  body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #f4f4f9;
+    color: #333;
+  }
+
+  header {
+    margin-top: 20px;
+    text-align: center;
+    color: #4a90e2;
+  }
+
+  h2 {
+    font-size: 2em;
+    margin-bottom: 20px;
+  }
+
+  /* Container for grid */
+  .container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+    max-width: 900px;
+    width: 100%;
+    padding: 0 20px;
+    margin-bottom: 20px;
+  }
+
+  /* Box Styles */
+  .box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #fff;
+    padding: 30px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    border-radius: 8px;
+    transition: transform 0.2s;
+  }
+
+  .box:hover {
+    transform: scale(1.05);
+  }
+
+  h3 {
+    margin-bottom: 15px;
+    font-size: 1.5em;
+    color: #333;
+  }
+
+  .Seach-box {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .Seach-box input[type="search"] {
+    width: 100%;
+    padding: 12px;
+    font-size: 1em;
+    border: 1px solid #ddd;
+    border-radius: 4px 0 0 4px;
+    outline: none;
+  }
+
+  .Seach-box img {
+    width: 35px;
+    height: 35px;
+    cursor: pointer;
+    padding: 5px;
+    border-radius: 0 4px 4px 0;
+    background-color: #4a90e2;
+  }
+
+  footer p{
+    font-size: 10px;
+  }
+  /* Responsive adjustments */
+  @media (max-width: 600px) {
+    h2 {
+      font-size: 1.75em;
+    }
+    .box {
+      padding: 20px;
+    }
+    .Seach-box input[type="search"] {
+      font-size: 0.9em;
+      padding: 10px;
+    }
+    .Seach-box img {
+      width: 30px;
+      height: 30px;
+    }
+  }
+

Vanilla-JS-Projects/README.md

@@ -108,6 +108,12 @@
 |:--:|:--:|:--:|
 | [Youtube Clone](./Basic/Youtube-Clone) | [Electronic Drum Kit](./Basic/Electronic-Drum-Kit) | [Paytm Clone](./Basic/Paytm-Clone)  |
 
+#### :zap: Row 17
+
+| <img src="./Basic/Search-From-Here/screenshot.webp" width="300px" height="180px"> | | |
+|:--:|:--:|:--:|
+| [Search From Here](./Basic/Search-From-Here) | | |
+
 ---
 <!-- ###################################################################################################################### -->
 <!-- ###################################################################################################################### -->