diff --git a/Vanilla-JS-Projects/Basic/Search-From-Here/README.md b/Vanilla-JS-Projects/Basic/Search-From-Here/README.md new file mode 100644 index 00000000..f7726530 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Search-From-Here/README.md @@ -0,0 +1,80 @@ +

💥 Search From Here 💥

+ + + +

Tech Stack Used 🎮

+ + +
+ + ![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) + + + + + + + + + + + +
+ + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +## :zap: Description 📃 + +
+ +

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.

+
+ + + + +## :zap: How to run it? 🕹️ + + +- Fork this project and run the `index.html` file directly. + + + + +## :zap: Screenshots 📸 + +![image](https://github.com/user-attachments/assets/2a09643c-3751-4b5e-a239-3d1287c66b32) + + + +## :zap: Working Video 📹 + + +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) + + + +

Developed By Jomana Tantawy 👦

+

+ + + + + + +

+ +

Happy Coding 🧑‍💻

+ +

Show some  ❤️  by  🌟  this repository!

diff --git a/Vanilla-JS-Projects/Basic/Search-From-Here/SearchIcon.webp b/Vanilla-JS-Projects/Basic/Search-From-Here/SearchIcon.webp new file mode 100644 index 00000000..e4028ba3 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Search-From-Here/SearchIcon.webp differ diff --git a/Vanilla-JS-Projects/Basic/Search-From-Here/image.png b/Vanilla-JS-Projects/Basic/Search-From-Here/image.png new file mode 100644 index 00000000..cd28d8a5 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Search-From-Here/image.png differ diff --git a/Vanilla-JS-Projects/Basic/Search-From-Here/index.html b/Vanilla-JS-Projects/Basic/Search-From-Here/index.html new file mode 100644 index 00000000..623587a5 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Search-From-Here/index.html @@ -0,0 +1,47 @@ + + + + + + Search From Here + + + + +
+

Search From Here

+
+
+
+

Google

+
+ + SearchIcon +
+
+
+

Amazon

+
+ + SearchIcon +
+
+
+

Youtube

+
+ + SearchIcon +
+
+
+

Wikipedia

+
+ + SearchIcon +
+
+
+ + + + diff --git a/Vanilla-JS-Projects/Basic/Search-From-Here/screenshot.webp b/Vanilla-JS-Projects/Basic/Search-From-Here/screenshot.webp new file mode 100644 index 00000000..c4aa83bf Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Search-From-Here/screenshot.webp differ diff --git a/Vanilla-JS-Projects/Basic/Search-From-Here/script.js b/Vanilla-JS-Projects/Basic/Search-From-Here/script.js new file mode 100644 index 00000000..966bc503 --- /dev/null +++ b/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."); + } + }); + }); + }); + \ No newline at end of file diff --git a/Vanilla-JS-Projects/Basic/Search-From-Here/style.css b/Vanilla-JS-Projects/Basic/Search-From-Here/style.css new file mode 100644 index 00000000..fcbc1a7c --- /dev/null +++ b/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; + } + } + \ No newline at end of file diff --git a/Vanilla-JS-Projects/README.md b/Vanilla-JS-Projects/README.md index 39635934..d1cd1582 100644 --- a/Vanilla-JS-Projects/README.md +++ b/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 + +| | | | +|:--:|:--:|:--:| +| [Search From Here](./Basic/Search-From-Here) | | | + ---