Skip to content

Commit 464ea0d

Browse files
amit265amit265
committed
infinite scroll
1 parent 577b17b commit 464ea0d

File tree

3 files changed

+60
-30
lines changed

3 files changed

+60
-30
lines changed

‎image-search/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,26 @@
22
<html lang="en">
33

44
<head>
5+
<!-- Open Graph / Facebook -->
6+
<meta property="og:type" content="website">
7+
<meta property="og:url" content="https://www.coderespite.com/projects/js-projects/image-search/">
8+
<meta property="og:title" content="Image Search with Infinite Scroll">
9+
<meta property="og:description" content="Discover and search for stunning images using our JavaScript-based image search application. Powered by the Unsplash API, the app displays search results with infinite scrolling for a seamless browsing experience.">
10+
<meta property="og:image" content="https://www.coderespite.com/image/js-projects/image-search.png">
11+
12+
<!-- Twitter -->
13+
<meta property="twitter:card" content="summary_large_image">
14+
<meta property="twitter:url" content="https://www.coderespite.com/projects/js-projects/image-search/">
15+
<meta property="twitter:title" content="Image Search with Infinite Scroll">
16+
<meta property="twitter:description" content="Search and explore an endless stream of images using our JavaScript, HTML, and CSS-based image search app. Utilizing the Unsplash API, the app continuously loads images as you scroll, offering a fluid and engaging experience.">
17+
<meta property="twitter:image" content="https://www.coderespite.com/image/js-projects/image-search.png">
18+
19+
<!-- Additional Meta Tags -->
20+
<meta name="keywords" content="Image Search, JavaScript, Unsplash API, Infinite Scroll, Web Development, Frontend, CSS, HTML">
21+
<meta name="robots" content="index, follow">
22+
<meta name="language" content="English">
23+
<meta name="theme-color" content="#ffffff">
24+
525
<link rel="stylesheet" href="styles.css">
626
<meta charset="UTF-8">
727
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -18,6 +38,7 @@
1838
<div class="image-cards" id="image-cards">
1939

2040
</div>
41+
<div id="loading"></div>
2142
</div>
2243
</main>
2344
<script src="script.js"></script>

‎image-search/script.js‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,44 +2,46 @@ const searchText = document.getElementById("search-input");
22
const searchBtn = document.getElementById("search-btn");
33
const imageCards = document.getElementById("image-cards");
44
const searchResultDiv = document.getElementById("search-resultDiv");
5+
const loading = document.getElementById("loading");
56
const imageApi = "https://api.unsplash.com/search/photos?query=";
67
const accessKey = "cZkBLec2VWlXBAgs785p7uw9nagFu_G0Zgb8e5lK400";
78
let currentPage = 1;
89
let total_pages = "";
910

10-
11-
const fetchImages = async (query, page=1) => {
11+
const fetchImages = async (query, page = 1) => {
1212
if (!query) {
13-
console.log("Query is empty");
14-
13+
// console.log("Query is empty");
1514
return;
1615
}
1716
try {
18-
const response = await fetch(`${imageApi}${query}&client_id=${accessKey}&page=${page}`);
17+
const response = await fetch(
18+
`${imageApi}${query}&client_id=${accessKey}&page=${page}`
19+
);
1920
const data = await response.json();
2021
total_pages = data.total_pages;
21-
console.log(data);
22-
23-
console.log(data.total_pages);
24-
console.log(total_pages);
22+
// console.log(data);
23+
// console.log(data.total_pages);
24+
// console.log(total_pages);
2525

2626
displayImages(data.results);
2727
} catch (error) {
28-
console.log("Error fetching images:", error);
28+
// console.log("Error fetching images:", error);
2929
}
3030
};
3131

3232
const displayImages = (images) => {
33-
if(currentPage === 1) {
33+
if (currentPage === 1) {
3434
imageCards.innerHTML = "";
35-
3635
}
3736
images.forEach((image) => {
3837
const imageBlock = document.createElement("div");
3938
const imgElement = document.createElement("img");
4039
const imgCaption = document.createElement("p");
4140

42-
imgCaption.innerText = image.description || "no description available";
41+
imgCaption.innerText =
42+
(image.description.length > 50
43+
? image.description.slice(0, 50) + "..."
44+
: image.description) || "no description available";
4345
imgElement.src = image.urls.small;
4446
imgElement.alt = image.alt_description || "Image";
4547

@@ -48,16 +50,6 @@ const displayImages = (images) => {
4850
imageBlock.appendChild(imgCaption);
4951
imageCards.appendChild(imageBlock);
5052
});
51-
if(currentPage < total_pages) {
52-
const moreButton = document.createElement("button");
53-
moreButton.innerText = "More";
54-
moreButton.id = "more-button";
55-
searchResultDiv.appendChild(moreButton);
56-
}
57-
58-
moreButton.addEventListener("click", searchMoreImage);
59-
60-
6153
};
6254

6355
const searchImage = () => {
@@ -67,17 +59,27 @@ const searchImage = () => {
6759

6860
const searchMoreImage = () => {
6961
const query = searchText.value.trim();
70-
if(currentPage < total_pages) {
62+
if (currentPage < total_pages) {
7163
currentPage++;
72-
fetchImages(query, currentPage)
64+
fetchImages(query, currentPage);
65+
// console.log("more images" + currentPage);
7366
}
74-
75-
}
67+
};
7668

7769
searchBtn.addEventListener("click", searchImage);
7870

7971
searchText.addEventListener("keydown", (e) => {
80-
if(e.key === "Enter"){
72+
if (e.key === "Enter") {
8173
searchImage();
8274
}
83-
})
75+
});
76+
77+
document.addEventListener("scroll", () => {
78+
let scrollTop = document.documentElement.scrollTop;
79+
let scrollHeight = document.documentElement.scrollHeight;
80+
let clientHeight = document.documentElement.clientHeight;
81+
if (scrollTop + clientHeight >= scrollHeight) {
82+
loading.innerText = "Loading...";
83+
searchMoreImage();
84+
}
85+
});

‎image-search/styles.css‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,15 +79,22 @@ img {
7979

8080
}
8181

82+
83+
8284
p {
8385
text-justify: auto;
8486
padding: 10px;
8587

8688
}
8789

8890
.image-card:hover {
89-
transform: scale(1.1);
91+
transform: scale(1.05);
9092
cursor: pointer;
9193
box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.6);
94+
border: 1px solid green;
95+
96+
}
9297

98+
#loading {
99+
padding: 2rem;
93100
}

0 commit comments

Comments
 (0)