PicFind

				
					const searchResult = async (userKeyword, clearResult = true) => {
    loading.style.display = "block";
    if (clearResult) {
        allOutputs.textContent = "";
    }
    let api_url = `https://api.unsplash.com/search/photos?client_id=${accessKey}&page=${page}&query=${userKeyword}&per_page=12`;

    // Adding filters to the API URL
    if (orientations.value) api_url += `&orientation=${orientations.value}`;
    if (color.value) api_url += `&color=${color.value}`;
    if (orderBy.value) api_url += `&order_by=${orderBy.value}`;

    try {
        const response = await fetch(api_url);
        const data = await response.json();
        if (data.results && data.results.length > 0) {
            data.results.forEach((image) => {
                const allOutputs = document.getElementById("allOutputs");
                const imageContainer = document.createElement("div");
                imageContainer.classList.add("imageContainer");

                const img = document.createElement("img");
                const info = document.createElement("span");
                const imageLink = document.createElement("a");
                imageLink.href = image.links.html;
                imageLink.target = "_blank";

                img.src = image.urls.small;
                const isoDate = `${image.created_at}`;
                const date = new Date(isoDate);
                const formattedDate = date.toISOString().split("T")[0];
                info.textContent = `Uploaded by: ${image.user.name || 'Unsplash user'} on ${formattedDate}`;
                info.classList.add("hide", "info");

                imageLink.appendChild(img);
                imageContainer.appendChild(imageLink);
                imageContainer.appendChild(info);
                allOutputs.appendChild(imageContainer);
            });
        } else {
            loading.style.display = "none";
            document.getElementById("errors").textContent = 'Nothing to show :(';
        }
    } catch (error) {
        loading.style.display = "none";
        document.getElementById("errors").textContent = "Error fetching data: " + error;
    }
};