diff --git a/Vanilla-JS-Projects/Basic/Image-Search-Engine/README.md b/Vanilla-JS-Projects/Basic/Image-Search-Engine/README.md new file mode 100644 index 00000000..867b3197 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Image-Search-Engine/README.md @@ -0,0 +1,65 @@ +

đŸ’Ĩ Image Search Engine đŸ’Ĩ

+ + + +

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 📃 + +- This application can display images with description while searched. + + + +## :zap: How to run it? 🕹ī¸ + + +- Fork this project and run the `index.html` file directly. + + + +## :zap: Screenshots 📸 + + +![image](screenshot.webp) + + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + + +

Developed By G Avineshwar

+

+ + + +

+ +

Happy Coding 🧑‍đŸ’ģ

+ +

Show some  â¤ī¸  by  đŸŒŸ  this repository!

diff --git a/Vanilla-JS-Projects/Basic/Image-Search-Engine/index.html b/Vanilla-JS-Projects/Basic/Image-Search-Engine/index.html new file mode 100644 index 00000000..5dc9a09c --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Image-Search-Engine/index.html @@ -0,0 +1,29 @@ + + + + + + + Search Engine by images + + +

Image Search Engine

+
+ + +
+
+
+
+
+ + + +
+ + + diff --git a/Vanilla-JS-Projects/Basic/Image-Search-Engine/screenshot.webp b/Vanilla-JS-Projects/Basic/Image-Search-Engine/screenshot.webp new file mode 100644 index 00000000..35d797d7 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Image-Search-Engine/screenshot.webp differ diff --git a/Vanilla-JS-Projects/Basic/Image-Search-Engine/script.js b/Vanilla-JS-Projects/Basic/Image-Search-Engine/script.js new file mode 100644 index 00000000..62a68271 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Image-Search-Engine/script.js @@ -0,0 +1,78 @@ +const accesskey = "YIrToF44KiZZvhSHhpvqpPoWuv2dy4_vYKi61nRrjEU"; + +const searchForm = document.getElementById("search-form"); + +const searchBox = document.getElementById("search-box"); +const searchResult = document.getElementById("search-result"); +// we get function by Id here not with class +const photodesc = document.getElementById("photo"); + +const showMoreBtn = document.getElementById("show-more-btn"); + +const showLessBtn = document.getElementById("show-less-btn"); + +let keyword = ""; +let page = 1; + +async function searchImage() { + keyword = searchBox.value; + const url = `https://api.unsplash.com/search/photos?page=${page}&query=${keyword}&client_id=${accesskey}&per_page=12`; + const response = await fetch(url); + const data = await response.json(); + + console.log(data); + + const results = data.results; + console.log(results); + + if (page === 1) { + searchResult.innerHTML = ""; + // photodesc.innerHTML="" + } + + results.map((result) => { + const imageLink = document.createElement("a"); + imageLink.href = result.links.html; + console.log(result.links.html); + imageLink.target = "_blank"; + + const image = document.createElement("img"); + image.src = result.urls.small; + console.log(result.urls.small); + + const desc = document.createElement("h6"); + desc.innerText = result.alt_description; + desc.style.color = "white"; + desc.style.textAlign = "center"; + desc.style.marginTop = "10px"; + desc.style.fontSize = "20px"; + desc.style.fontWeight = "600"; + desc.style.textDecoration = "none"; + + imageLink.appendChild(image); + imageLink.appendChild(desc); + searchResult.appendChild(imageLink); + }); + showMoreBtn.style.display = "block"; + if (page >= 2) { + showLessBtn.style.display = "block"; + } else { + showLessBtn.style.display = "none"; + } +} + +searchForm.addEventListener("submit", (e) => { + e.preventDefault(); + page = 1; + searchImage(); +}); +showMoreBtn.addEventListener("click", () => { + page++; + searchImage(); +}); +showLessBtn.addEventListener("click", () => { + if (page > 1) { + page--; + } + searchImage(); +}); diff --git a/Vanilla-JS-Projects/Basic/Image-Search-Engine/style.css b/Vanilla-JS-Projects/Basic/Image-Search-Engine/style.css new file mode 100644 index 00000000..a3f6ceed --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Image-Search-Engine/style.css @@ -0,0 +1,172 @@ +* { + margin: 0; + padding: 0; + font-family: "poppins", "sans-serif"; + box-sizing: border-box; +} +body { + /* background: #39297b; */ + background: linear-gradient( + to right, + #001a00, + #003300, + #004d00, + #006600, + #008000, + #006600, + #004d00, + #003300, + #001a00 + ); + color: white; + animation: discoBackground 15s infinite alternate; +} +h1 { + color: #fff; + text-align: center; + justify-content: center; + margin: 100px auto 50px; + font-weight: bold; + text-decoration: underline; + text-decoration: white; + font-size: 35px; +} +h1:hover { + /* border-color: #ff3929; */ + color: blueviolet; + background-color: linear-gradient( + to right, + #001a00, + #003300, + #004d00, + #006600, + #008000, + #006600, + #004d00, + #003300, + #001a00 + ); +} +span { + color: aquamarine; +} +form { + width: 90%; + max-width: 600px; + margin: auto; + height: 80px; + background: #434989; + display: flex; + align-items: center; + justify-content: space-between; + border-radius: 8px; + /* padding: 20px; */ +} +form input { + flex: 1; + height: 100%; + border: 0; + outline: 0; + background: transparent; + color: #fff; + font-size: 18px; + padding: 0 30px; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; +} +form button { + padding: 0 40px; + height: 100%; + background: #ff3929; + color: #fff; + font-size: 20px; + font-weight: 600; + border: 0; + outline: 0; + border-top-right-radius: 8px; + border-bottom-right-radius: 8px; + cursor: pointer; +} +::placeholder { + color: #fff; + font-size: 20px; +} +.buttons { + display: flex; + flex-direction: row; + justify-content: space-between; +} +#show-more-btn { + background: #ff3929; + color: white; + border: 0; + outline: 0; + padding: 10px 20px; + border-radius: 4px; + margin: 10px auto 100px; + cursor: pointer; + display: none; +} +#show-less-btn { + background: #ff3929; + color: white; + border: 0; + outline: 0; + padding: 10px 20px; + border-radius: 4px; + margin: 10px auto 100px; + cursor: pointer; + display: none; +} +#photo { + padding: 20px; +} +#search-result { + align-items: center; + width: 80%; + margin: 100px auto 50px; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-gap: 40px; +} +#search-result img { + width: 250px; + height: 250px; + object-fit: cover; + border-radius: 5px; + border: 2px solid red; + animation: shiningBorder 2s infinite linear; +} + +@keyframes shiningBorder { + 0% { + border-color: rgba(160, 29, 175, 0.1); + box-shadow: 0 0 10px rgba(0, 0, 255, 0.1); + } + 50% { + border-color: rgba(218, 248, 26, 0.5); + box-shadow: 0 0 20px rgba(39, 196, 220, 0.5); + } + 100% { + border-color: rgba(225, 32, 22, 0.1); + box-shadow: 0 0 10px rgba(0, 0, 255, 0.1); + } +} + +@keyframes discoBackground { + 0% { + background-color: 0%; + } + 25% { + background-color: 25%; + } + 50% { + background-color: 50%; + } + 75% { + background-color: 75%; + } + 100% { + background-color: 100%; + } +} diff --git a/Vanilla-JS-Projects/README.md b/Vanilla-JS-Projects/README.md index d7c045ed..4a6f1fbb 100644 --- a/Vanilla-JS-Projects/README.md +++ b/Vanilla-JS-Projects/README.md @@ -55,17 +55,19 @@ | 28 | [Typing-Test](./Advanced/Typing-Test/) | ![Advanced](https://img.shields.io/badge/Advanced-FF0000?style=for-the-badge) | | 29 | [RGB-Color-Slider](./Basic/RGB-Color-Slider/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | | 30 | [Expense Tracker](./Basic/Expense-Tracker/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | -| 31 | [CSS Art Gallery](./Basic/CSS-Art-Gallery) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | +| 31 | [CSS Art Gallery](./Basic/CSS-Art-Gallery) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | | 32 | [Quote-Generator](./Basic/Quote-Generator/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | -| 33 | [Social Media Analytics](./Intermediate/Social-Media-Analytics/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | -| 34 | [Movie Finder](./Intermediate/Movie-Finder/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | -| 35 | [Resume Builder](./Advanced/Resume-Builder/) |![Advanced](https://img.shields.io/badge/Advanced-FF0000?style=for-the-badge) | +| 33 | [Social Media Analytics](./Intermediate/Social-Media-Analytics/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | +| 34 | [Movie Finder](./Intermediate/Movie-Finder/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | +| 35 | [Resume Builder](./Advanced/Resume-Builder/) |![Advanced](https://img.shields.io/badge/Advanced-FF0000?style=for-the-badge) | | 36 | [Virtual-Piano](./Basic/Virtual-Piano/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | | 37 | [Text-to-Image-Generator](./Intermediate/Text-to-Image-Generator/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | -| 38 | [Text-Translator](./Basic/Text-Translator/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | -| 39 | [Interactive-Periodic-Table](./Intermediate/Interactive-Periodic-Table/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | -| 40 | [Anagram-Checker](./Basic/Anagram-Checker/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) -| 41 | [Leap-Year-Checker](./Basic/Leap-Year-Checker/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) +| 38 | [Text-Translator](./Basic/Text-Translator/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | +| 39 | [Interactive-Periodic-Table](./Intermediate/Interactive-Periodic-Table/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | +| 40 | [Anagram-Checker](./Basic/Anagram-Checker/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | +| 41 | [Leap-Year-Checker](./Basic/Leap-Year-Checker/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | +| 42 | [Image-Search-Engine](./Basic/Image-Search-Engine/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | +