-
Notifications
You must be signed in to change notification settings - Fork 0
/
ImageSearchApp.js
62 lines (60 loc) · 2.24 KB
/
ImageSearchApp.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
const searchForm = document.querySelector("form");
const imagesContainer = document.querySelector(".images-container");
const searchInput = document.querySelector(".search-input");
const loadMoreBtn = document.querySelector(".loadMoreBtn");
const accessKey = "F_wonrRkfJtaQSkvlgtzbh2ku9UJYIGNKVtVPzuEPVM";
let page = 1;
//function to fetech the imagess using unsplash api
const fetchImage = async (query, pageNo) => {
try {
if (pageNo === 1) {
imagesContainer.innerHTML = "";
}
const url = `https://api.unsplash.com/search/photos?query=${query}&per_page=28&page=${pageNo}&client_id=${accessKey}`;
const response = await fetch(url);
const data = await response.json();
if (data.results.length > 0) {
data.results.forEach((photo) => {
//creating image div
const imageElement = document.createElement("div");
imageElement.classList.add("imageDiv");
imageElement.innerHTML = `<img src="${photo.urls.regular}"/>`;
//creating overlay element
const overlayElement = document.createElement("div");
overlayElement.classList.add("overlay");
//creting overlay text
const overlayText = document.createElement("h3");
overlayElement.appendChild(overlayText);
overlayText.innerText = `${photo.alt_description}`;
imageElement.appendChild(overlayElement);
imagesContainer.appendChild(imageElement);
});
if (data.total_pages === pageNo) {
loadMoreBtn.style.display = "none";
} else {
loadMoreBtn.style.display = "block";
}
} else {
imagesContainer.innerHTML = `<h2>No Images Found</h2>`;
}
} catch (error) {
imagesContainer.innerHTML = `<h2>Failed to Fetch Images Please try again later</h2>`;
}
};
searchForm.addEventListener("submit", (e) => {
e.preventDefault();
const inputText = searchInput.value.trim();
if (inputText !== "") {
page = 1;
fetchImage(inputText, page);
} else {
imagesContainer.innerHTML = `<h2>Please enter a search query</h2>`;
if (loadMoreBtn.style.display === "block") {
loadMoreBtn.style.display === "none";
}
}
});
//function to fetch load more btn
loadMoreBtn.addEventListener("click", () => {
fetchImage(searchInput.value.trim(), ++page);
});