https://nasa.on.websim.com/gallery.js

1const loadGalleryButton = document.getElementById('loadGallery');
2const sortOrderSelect = document.getElementById('sortOrder');
3const galleryResultsContainer = document.getElementById('galleryResults');
4const loadingIndicator = document.getElementById('loading');
5
6import { nasaApiKey } from './config.js';
7
8export async function fetchGalleryImages(sortBy = 'date') {
9    loadingIndicator.style.display = 'block';
10    galleryResultsContainer.innerHTML = '';
11    try {
12        const response = await fetch(`https://images-api.nasa.gov/search?q=galaxy&sort=${sortBy}`);
13        const data = await response.json();
14        displayGalleryImages(data.collection.items);
15    } catch (error) {
16        console.error('Error fetching gallery images:', error);
17        galleryResultsContainer.innerHTML = '<p>An error occurred while loading gallery images. Please try again.</p>';
18    } finally {
19        loadingIndicator.style.display = 'none';
20    }
21}
22
23function displayGalleryImages(items) {
24    if (!items || !Array.isArray(items)) {
25        galleryResultsContainer.innerHTML = '<p>No images found in the gallery.</p>';
26        return;
27    }
28    
29    items.slice(0, 12).forEach(item => {
30        // Robust check for data structure
31        if (item.links && item.links.length > 0 && item.links[0].href && 
32            item.data && item.data.length > 0) {
33            
34            const galleryItem = document.createElement('div');
35            galleryItem.className = 'result-item';
36            const description = item.data[0].description || 'No description available';
37            const title = item.data[0].title || 'Untitled';
38            
39            galleryItem.innerHTML = `
40                <img src="${item.links[0].href}" alt="${title}">
41                <h3>${title}</h3>
42                <p>${description.substring(0, 100)}...</p>
43            `;
44            galleryResultsContainer.appendChild(galleryItem);
45        }
46    });
47}
48
49loadGalleryButton.addEventListener('click', () => {
50    const selectedSortOrder = sortOrderSelect.value;
51    fetchGalleryImages(selectedSortOrder);
52});