Skip to content

Commit f05fcd4

Browse files
HarshCasperHarshCasper
authored
Merge pull request HarshCasper#426 from gupta-piyush19/img
 Image finder script is added HarshCasper#419
2 parents 3c09ba5 + be2000b commit f05fcd4

File tree

5 files changed

+113
-13
lines changed

5 files changed

+113
-13
lines changed

‎JavaScript/Blog_Image_Finder/ImageFinder.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// All DOM variables
2+
let container = document.querySelector('.container');
3+
4+
// Enter your Unsplash API key here
5+
let key = '';
6+
7+
let btn = document.querySelector('#btn');
8+
let input = document.querySelector('#query');
9+
10+
// function to retrieve photos from unsplash API
11+
async function getPhotos(reqURL){
12+
let res = await fetch(reqURL);
13+
let data = await res.json();
14+
console.log(data);
15+
if(data.results.length){
16+
for(let i = 0; i < data.results.length; i++){
17+
let img = document.createElement('img');
18+
img.src = data.results[i].links.download;
19+
img.height = "200";
20+
img.width = "200";
21+
container.appendChild(img);
22+
img.addEventListener('click',()=>{
23+
alert(img.src);
24+
})
25+
}
26+
}else{
27+
alert('No images Found for this input!');
28+
}
29+
}
30+
31+
// init function
32+
function init(){
33+
let word = input.value;
34+
input.value = "";
35+
container.textContent = "";
36+
let reqURL = `https://api.unsplash.com/search/photos?per_page=30&query=${word}&client_id=${key}`;
37+
getPhotos(reqURL);
38+
}
39+
40+
// Setting up all event listeners
41+
btn.addEventListener('click', init);
42+
document.addEventListener("keypress",e =>{
43+
if(e.which === 13)init();
44+
})

‎JavaScript/Blog_Image_Finder/README.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Script in JS used to get images
2+
3+
## About
4+
5+
Blogs are like caffine for writers for which they always tries to find interesting stuffs(images/quotes/GIFs) to encourage readers to read even a long blog.Now, Blogs are of various genres, so it is very difficuly for a writes to get apt images to insert in their blog. So, I've developed a script which is very much easy to use and which can find 20+ images instantly and also provides the link(Unsplash link).
6+
7+
## Explanation of code
8+
9+
- unsplash API is used to fetch all images(https://api.unsplash.com/search/photos?per_page=30&query=[word]&client_id=[key])
10+
- An API key is required to use the API in your app, which can easily be obtained from [unsplash official website](https://unsplash.com/developers).
11+
- Async/Await is used to consume promises.
12+
- Script is dependent on a basic boilerplate HTML file, which displays all the images retreived by the script.
13+
- To get link of any image, just click on that, a pop-up/alert window with link will appear.
14+
15+
## To run the code
16+
17+
- Clone the folder
18+
- Inside the folder open index.html or in some editor you can use live-server to run HTML file.
19+
- Then search images of which category/genre you want.
20+
21+
## Output
22+
![image](app.png)
23+
code by [Piyush Gupta](https://github.com/gupta-piyush19)

‎JavaScript/Blog_Image_Finder/app.png

1.63 MB
Loading

‎JavaScript/Blog_Image_Finder/index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Blog Image Finder</title>
7+
<style>
8+
h1{
9+
text-align: center;
10+
}
11+
input{
12+
margin-left: 44%;
13+
}
14+
img{
15+
margin : 18px;
16+
cursor: pointer;
17+
}
18+
</style>
19+
</head>
20+
<body>
21+
<h1>Blog Image Finder</h1>
22+
<input type="text" id="query">
23+
<button type="submit" id = "btn">Find</button>
24+
<div class="container">
25+
26+
</div>
27+
<script src="ImageFinder.js"></script>
28+
</body>
29+
</html>

‎JavaScript/README.md

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,20 @@ It enables interactive web pages and thus is an essential part of web applicatio
1313

1414
| S. No | Name of Script | Author |
1515
--- | --- | ---
16-
1 | [Automate Tinder](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Automate_Tinder) | [Harsh Barshan Mishra](https://github.com/HarshCasper)
17-
2 | [Base64 Encoder Decoder](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Base64_Encoder_Decoder) | [Piyush Gupta](https://github.com/gupta-piyush19)
18-
3 | [Brute Force Admin](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Brute_Force_Admin) | [Mohit Bhat](https://github.com/mbcse)
19-
4 | [Cryptoprice](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Cryptoprice) | [Mohit Bhat](https://github.com/mbcse)
20-
5 | [Download_All_Repos](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Download_All_Repos) | [Mohit Bhat](https://github.com/mbcse)
21-
6 | [Edit_Webpage](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Edit_Webpage) | [Harsh Barshan Mishra](https://github.com/HarshCasper)
22-
7 | [Extract_Comments](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Extract_Comments) | [Mohit Bhat](https://github.com/mbcse)
23-
8 | [Follow Instagram](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Follow_Instagram) | [Harsh Barshan Mishra](https://github.com/HarshCasper)
24-
9 | [Github Graph Populator](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/GitHub_Graph_Populator) | -
25-
10 | [Instagram Like](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Instagram_Like) | [Harsh Barshan Mishra](https://github.com/HarshCasper)
26-
11 | [RSA Key Pair Generator](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/RSA_Key_Pair_Generator) | [Mohit Bhat](https://github.com/mbcse)
27-
12 | [Send emails](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Send_Emails) | [Namya LG](https://github.com/Namyalg)
28-
13 | [Who don't follow you](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Who_Don't_Follow_You) | [Harsh Barshan Mishra](https://github.com/HarshCasper)
16+
1 | [Amazon_Review_Scrapper](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Amazon_Review_Scrapper) | -
17+
2 | [Automate Tinder](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Automate_Tinder) | [Harsh Barshan Mishra](https://github.com/HarshCasper)
18+
3 | [Base64 Encoder Decoder](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Base64_Encoder_Decoder) | [Piyush Gupta](https://github.com/gupta-piyush19)
19+
4 | [Blog Image Finder](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Blog_Image_Finder) | [Piyush Gupta](https://github.com/gupta-piyush19)
20+
5 | [Brute Force Admin](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Brute_Force_Admin) | [Mohit Bhat](https://github.com/mbcse)
21+
6 | [Bulk LinkedIn Requests](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Bulk_LinkedIn_requests) | -
22+
7 | [Cryptoprice](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Cryptoprice) | [Mohit Bhat](https://github.com/mbcse)
23+
8 | [Download_All_Repos](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Download_All_Repos) | [Mohit Bhat](https://github.com/mbcse)
24+
9 | [Edit_Webpage](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Edit_Webpage) | [Harsh Barshan Mishra](https://github.com/HarshCasper)
25+
10 | [Extract_Comments](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Extract_Comments) | [Mohit Bhat](https://github.com/mbcse)
26+
11 | [Follow Instagram](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Follow_Instagram) | [Harsh Barshan Mishra](https://github.com/HarshCasper)
27+
12 | [Github Graph Populator](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/GitHub_Graph_Populator) | -
28+
13 | [Html to markdown](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Html%20to%20markdown) | -
29+
14 | [Instagram Like](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Instagram_Like) | [Harsh Barshan Mishra](https://github.com/HarshCasper)
30+
15 | [RSA Key Pair Generator](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/RSA_Key_Pair_Generator) | [Mohit Bhat](https://github.com/mbcse)
31+
16 | [Send emails](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Send_Emails) | [Namya LG](https://github.com/Namyalg)
32+
17 | [Who don't follow you](https://github.com/HarshCasper/Rotten-Scripts/tree/master/JavaScript/Who_Don't_Follow_You) | [Harsh Barshan Mishra](https://github.com/HarshCasper)

0 commit comments

Comments
 (0)