Unsplash API

// Replace with your Unsplash API Access Key
const ACCESS_KEY = 'YOUR_ACCESS_KEY';
const API_URL = 'https://api.unsplash.com';
let currentPage = 1;
let currentQuery = '';
let isLoading = false;

// DOM Elements
const gallery = document.getElementById('image-gallery');
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
const loadMoreButton = document.getElementById('load-more');

// Event Listeners
searchButton.addEventListener('click', searchImages);
loadMoreButton.addEventListener('click', loadMoreImages);
searchInput.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    searchImages();
  }
});

// Load initial images
fetchImages();

// Fetch images from Unsplash
async function fetchImages(query = '') {
  if (isLoading) return;
  
  isLoading = true;
  let url = '';
  
  if (query) {
    url = `${API_URL}/search/photos?page=${currentPage}&per_page=12&query=${query}`;
  } else {
    url = `${API_URL}/photos?page=${currentPage}&per_page=12`;
  }
  
  try {
    const response = await fetch(url, {
      headers: {
        'Authorization': `Client-ID ${ACCESS_KEY}`
      }
    });
    
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    
    const data = await response.json();
    const images = query ? data.results : data;
    
    displayImages(images);
    isLoading = false;
  } catch (error) {
    console.error('Error fetching images:', error);
    isLoading = false;
  }
}

// Display images in the gallery
function displayImages(images) {
  images.forEach(image => {
    const item = document.createElement('div');
    item.className = 'gallery-item';
    
    const img = document.createElement('img');
    img.src = image.urls.regular;
    img.alt = image.alt_description || 'Unsplash Image';
    
    const info = document.createElement('div');
    info.className = 'info';
    
    const photographer = document.createElement('p');
    photographer.textContent = `Photo by ${image.user.name}`;
    
    const link = document.createElement('a');
    link.href = image.links.html;
    link.target = '_blank';
    link.textContent = 'View on Unsplash';
    link.style.color = 'white';
    
    info.appendChild(photographer);
    info.appendChild(link);
    
    item.appendChild(img);
    item.appendChild(info);
    
    gallery.appendChild(item);
  });
}

// Search for images
function searchImages() {
  const query = searchInput.value.trim();
  if (!query) return;
  
  // Reset gallery and page
  gallery.innerHTML = '';
  currentPage = 1;
  currentQuery = query;
  
  fetchImages(query);
}

// Load more images
function loadMoreImages() {
  currentPage++;
  fetchImages(currentQuery);
}