Skip to content

Commit 577b17b

Browse files
amit265amit265
committed
more image button added
1 parent df26cd3 commit 577b17b

File tree

3 files changed

+75
-16
lines changed

3 files changed

+75
-16
lines changed

‎image-search/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
<body>
1212
<main>
1313
<div class="search">
14-
<input type="text" name="search" id="search-input" placeholder="Search for images">
14+
<input type="text" name="search" id="search-input" placeholder="Search for images" required>
1515
<button type="submit" id="search-btn">Search</button>
1616
</div>
17-
<div class="search-result">
17+
<div class="search-result" id="search-resultDiv">
1818
<div class="image-cards" id="image-cards">
1919

2020
</div>

‎image-search/script.js‎

Lines changed: 45 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,27 @@
11
const searchText = document.getElementById("search-input");
22
const searchBtn = document.getElementById("search-btn");
33
const imageCards = document.getElementById("image-cards");
4+
const searchResultDiv = document.getElementById("search-resultDiv");
45
const imageApi = "https://api.unsplash.com/search/photos?query=";
56
const accessKey = "cZkBLec2VWlXBAgs785p7uw9nagFu_G0Zgb8e5lK400";
6-
const fetchImages = async (query) => {
7+
let currentPage = 1;
8+
let total_pages = "";
9+
10+
11+
const fetchImages = async (query, page=1) => {
712
if (!query) {
813
console.log("Query is empty");
14+
915
return;
1016
}
1117
try {
12-
const response = await fetch(`${imageApi}${query}&client_id=${accessKey}`);
18+
const response = await fetch(`${imageApi}${query}&client_id=${accessKey}&page=${page}`);
1319
const data = await response.json();
20+
total_pages = data.total_pages;
1421
console.log(data);
22+
23+
console.log(data.total_pages);
24+
console.log(total_pages);
1525

1626
displayImages(data.results);
1727
} catch (error) {
@@ -20,25 +30,54 @@ const fetchImages = async (query) => {
2030
};
2131

2232
const displayImages = (images) => {
23-
imageCards.innerHTML = "";
33+
if(currentPage === 1) {
34+
imageCards.innerHTML = "";
35+
36+
}
2437
images.forEach((image) => {
2538
const imageBlock = document.createElement("div");
2639
const imgElement = document.createElement("img");
2740
const imgCaption = document.createElement("p");
28-
imgCaption.innerText = image.description;
41+
42+
imgCaption.innerText = image.description || "no description available";
2943
imgElement.src = image.urls.small;
30-
imgElement.alt = image.alt_description;
44+
imgElement.alt = image.alt_description || "Image";
45+
3146
imageBlock.className = "image-card";
3247
imageBlock.appendChild(imgElement);
3348
imageBlock.appendChild(imgCaption);
34-
3549
imageCards.appendChild(imageBlock);
3650
});
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+
3761
};
3862

3963
const searchImage = () => {
4064
const query = searchText.value.trim();
4165
fetchImages(query);
4266
};
4367

68+
const searchMoreImage = () => {
69+
const query = searchText.value.trim();
70+
if(currentPage < total_pages) {
71+
currentPage++;
72+
fetchImages(query, currentPage)
73+
}
74+
75+
}
76+
4477
searchBtn.addEventListener("click", searchImage);
78+
79+
searchText.addEventListener("keydown", (e) => {
80+
if(e.key === "Enter"){
81+
searchImage();
82+
}
83+
})

‎image-search/styles.css‎

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22
padding: 0;
33
margin: 0;
44
box-sizing: border-box;
5+
6+
}
7+
8+
body {
9+
background-color: black;
510
}
611

712
main {
@@ -10,11 +15,14 @@ main {
1015
justify-content: center;
1116
align-items: center;
1217
gap: 5rem;
18+
color: white;
1319
}
1420

1521
.search {
1622
margin-top: 3rem;
1723
padding: 1rem;
24+
box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.2);
25+
1826
}
1927

2028
input {
@@ -35,7 +43,12 @@ button {
3543
cursor: pointer;
3644
}
3745

38-
.search-results {
46+
.search-result {
47+
display: flex;
48+
flex-direction: column;
49+
justify-content: center;
50+
align-items: center;
51+
gap: 2rem;
3952

4053
}
4154

@@ -51,23 +64,30 @@ button {
5164
padding: 10px;
5265
display: flex;
5366
flex-direction: column;
54-
background-color: aqua;
55-
height: 350px;
56-
width: 350px;
67+
background-color: black;
68+
width: 370px;
69+
box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.2);
70+
71+
5772
}
5873

5974
img {
6075
object-fit: cover;
61-
height: 300px;
62-
width: 300px;
63-
76+
margin-inline: auto;
77+
height: 350px;
78+
width: 350px;
79+
6480
}
6581

6682
p {
6783
text-justify: auto;
84+
padding: 10px;
85+
6886
}
6987

70-
img:hover {
88+
.image-card:hover {
7189
transform: scale(1.1);
7290
cursor: pointer;
91+
box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.6);
92+
7393
}

0 commit comments

Comments
 (0)