Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image Search Engine Added #392

Merged
merged 6 commits into from
Jun 25, 2024
Merged

Image Search Engine Added #392

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f24a8e1
Image Search Engine Added
GAVINESHWAR Jun 24, 2024
526cee5
Readme file updated
GAVINESHWAR Jun 25, 2024
f83ef45
conflict
GAVINESHWAR Jun 25, 2024
ce3ad7c
Merge branch 'main' into search
Avdhesh-Varshney Jun 25, 2024
db3f67e
align-fixes
Avdhesh-Varshney Jun 25, 2024
3d0ca9d
alignment-fixes
Avdhesh-Varshney Jun 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 65 additions & 0 deletions Vanilla-JS-Projects/Basic/Image-Search-Engine/README.md
View file
Open in desktop
Avdhesh-Varshney marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<h1 align='center'><b>💥 Image Search Engine 💥</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 📃

- This application can display images with description while searched.

<!-- -------------------------------------------------------------------------------------------------------------- -->

## :zap: How to run it? 🕹️

<!-- add the steps how to run the project -->
- Fork this project and run the `index.html` file directly.

<!-- -------------------------------------------------------------------------------------------------------------- -->

## :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>G Avineshwar</i></b> </h4>
<p align='center'>
<a href='https://github.com/Anshika14528'>
<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>
29 changes: 29 additions & 0 deletions Vanilla-JS-Projects/Basic/Image-Search-Engine/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Search Engine by images</title>
</head>
<body>
<h1><span>Image</span> Search Engine</h1>
<form id="search-form">
<input
type="text"
id="search-box"
placeholder="search anything here..."
/>
<button>Search</button>
</form>
<div id="search-result">
<div id="photo"></div>
</div>
<div class="buttons">
<button id="show-more-btn">Show more</button>

<button id="show-less-btn">Show less</button>
</div>
</body>
<script src="script.js"></script>
</html>
Binary file added Vanilla-JS-Projects/Basic/Image-Search-Engine/screenshot.webp
View file
Open in desktop
Binary file not shown.
78 changes: 78 additions & 0 deletions Vanilla-JS-Projects/Basic/Image-Search-Engine/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
});
172 changes: 172 additions & 0 deletions Vanilla-JS-Projects/Basic/Image-Search-Engine/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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%;
}
}
18 changes: 10 additions & 8 deletions Vanilla-JS-Projects/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) |

</div>


Expand Down