app.js

// Unsplash API Key (Replace with your own key)
const apiKey = 'Replace_with_API_key'; 

let currentPage = 1; // Keeps track of the current page number
let query = ''; // Stores the search query

// Event listener to detect "Enter" key press in search bar
document.getElementById("search").addEventListener("keypress", function(event) {
    if (event.key === "Enter") {
        event.preventDefault(); // Prevents default form submission
        searchImages(); // Calls the search function
    }
});

// Function to start image search
async function searchImages() {
    query = document.getElementById('search').value.trim();
    
    if (query === '') {
        alert("Please enter a search term!");
        return;
    }

    currentPage = 1; // Reset page count when starting a new search
    loadImages(query);
}

// Load random images when the page first loads
window.onload = function() {
    loadRandomImages();
};

// Function to fetch and display random images
async function loadRandomImages() {
    try {
        const url = `https://api.unsplash.com/photos?page=${currentPage}&per_page=30&client_id=${apiKey}`;
        const response = await fetch(url);
        
        if (!response.ok) throw new Error(`HTTP Error! Status: ${response.status}`);
        
        const data = await response.json();
        
        if (!Array.isArray(data) || data.length === 0) {
            console.error("No images found.");
            alert("No images available at the moment.");
            return;
        }

        displayImages(data); // Display images on the webpage
    } catch (error) {
        console.error("Error fetching images:", error);
        alert("Failed to load random images. Check your API key.");
    }
}

// Function to fetch and display searched images
async function loadImages(query = '') {
    const url = `https://api.unsplash.com/search/photos?query=${query}&page=${currentPage}&per_page=15&client_id=${apiKey}`;

    try {
        const response = await fetch(url);
        
        if (!response.ok) throw new Error(`HTTP Error! Status: ${response.status}`);
        
        const data = await response.json();
        displayImages(data.results || data); // Display fetched images
    } catch (error) {
        console.error("Error fetching images:", error);
        alert("Failed to fetch images. Check your API key.");
    }
}

// Function to display images in the grid layout
function displayImages(data) {
    const imageContainer = document.getElementById('image-container');

    if (currentPage === 1) {
        imageContainer.innerHTML = ''; // Clear previous images on new search
    }

    if (!Array.isArray(data) || data.length === 0) {
        imageContainer.innerHTML = "<p>No images found.</p>";
        return;
    }

    data.forEach(image => {
        const imageCard = document.createElement('div');
        imageCard.classList.add('image-card');

        const imgElement = document.createElement('img');
        imgElement.src = image.urls.small;
        imgElement.alt = image.alt_description || 'Image';
        imgElement.onclick = () => openModal(image);

        imageCard.appendChild(imgElement);
        imageContainer.appendChild(imageCard);
    });

    currentPage++; // Increment for the next page load
}

// Function to load more images when clicking "Load More"
function loadMoreImages() {
    if (query) {
        loadImages(query);
    } else {
        loadRandomImages();
    }
}

// Function to open modal with image details
function openModal(image) {
    document.getElementById('modal-image').src = image.urls.regular;
    document.getElementById('image-title').textContent = image.alt_description || 'Untitled Image';
    document.getElementById('photographer').textContent = image.user.name;
    document.getElementById('location').textContent = image.location ? image.location.title : 'Unknown';
    document.getElementById('dimensions').textContent = `${image.width}x${image.height}`;
    document.getElementById('likes').textContent = image.likes;
    document.getElementById('description').textContent = image.description || 'No description available';

    document.getElementById('download-btn').onclick = function () {
        downloadImage(image.urls.full);
    };

    document.getElementById('image-modal').style.display = 'block';
}

// Function to download an image
function downloadImage(url) {
    const link = document.createElement('a');
    link.href = url;
    link.download = 'image.jpg';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

// Function to close modal when "X" button is clicked
document.getElementById('close-modal').onclick = function() {
    document.getElementById('image-modal').style.display = 'none';
};