From 83a96ea56dbf93f071919e051331e7496174769f Mon Sep 17 00:00:00 2001
From: Surya Prakash Kahar <sp2002rk@gmail.com>
Date: Sun, 5 Oct 2025 16:32:06 +0530
Subject: [PATCH 1/3] Create an Example Solution for an Image Search App #320

---
 examples/Image-Search-App/README.md  | 178 +++++++++++
 examples/Image-Search-App/index.html |  84 +++++
 examples/Image-Search-App/script.js  | 460 +++++++++++++++++++++++++++
 examples/Image-Search-App/styles.css | 407 ++++++++++++++++++++++++
 4 files changed, 1129 insertions(+)
 create mode 100644 examples/Image-Search-App/README.md
 create mode 100644 examples/Image-Search-App/index.html
 create mode 100644 examples/Image-Search-App/script.js
 create mode 100644 examples/Image-Search-App/styles.css

diff --git a/examples/Image-Search-App/README.md b/examples/Image-Search-App/README.md
new file mode 100644
index 00000000..c754c3f3
--- /dev/null
+++ b/examples/Image-Search-App/README.md
@@ -0,0 +1,178 @@
+# Image Search App
+
+A modern, responsive image search application that demonstrates API integration, asynchronous JavaScript, and responsive UI design concepts.
+
+## 🚀 Features
+
+- **Dynamic Image Search**: Search for images using keywords
+- **Real-time Results**: Fetches and displays images instantly
+- **Responsive Grid Layout**: Beautiful masonry-style grid that adapts to all screen sizes
+- **Infinite Scroll**: Automatically loads more images as you scroll
+- **Loading Indicators**: Visual feedback during API requests
+- **Error Handling**: Comprehensive error handling for API failures and network issues
+- **Full-size Image View**: Click any image to view it in full size with modal overlay
+- **Modern UI**: Glass morphism design with smooth animations and transitions
+
+## 🛠 Technologies Demonstrated
+
+- **Fetch API & Async/Await**: Modern JavaScript for API requests
+- **DOM Manipulation**: Dynamic content creation and updates
+- **CSS Grid & Flexbox**: Responsive layout design
+- **CSS Animations**: Smooth transitions and loading states
+- **Event Handling**: Search, scroll, and click interactions
+- **Error Handling**: Try-catch blocks and user-friendly error messages
+- **Responsive Design**: Mobile-first approach with media queries
+
+## 📁 Project Structure
+
+```
+Image-Search-App/
+├── index.html          # Main HTML structure
+├── styles.css          # Responsive CSS with modern design
+└── script.js           # JavaScript logic and API integration
+```
+
+## 🔧 Setup Instructions
+
+1. **Get Unsplash API Key**:
+   - Visit [Unsplash Developers](https://unsplash.com/developers)
+   - Create a free account and register your application
+   - Copy your Access Key
+
+2. **Configure API Key**:
+   - Open `script.js`
+   - Replace `YOUR_UNSPLASH_ACCESS_KEY` with your actual API key:
+   ```javascript
+   this.API_KEY = 'your_actual_api_key_here';
+   ```
+
+3. **Open in Browser**:
+   - Open `index.html` in any modern web browser
+   - No build process or server required!
+
+## 🎯 API Integration Details
+
+The app uses the Unsplash Search Photos API:
+
+```javascript
+// Example API call structure
+const response = await fetch('https://api.unsplash.com/search/photos', {
+    headers: {
+        'Authorization': `Client-ID ${API_KEY}`
+    }
+});
+```
+
+**Parameters used:**
+- `query`: Search term (e.g., "nature", "technology")
+- `page`: Page number for pagination
+- `per_page`: Number of results (12 per page)
+- `orientation`: "landscape" for consistent layout
+
+## 💡 Key Code Concepts
+
+### Async/Await Pattern
+```javascript
+async performSearch(query) {
+    try {
+        const images = await this.fetchImages(query, page);
+        this.displayImages(images);
+    } catch (error) {
+        this.handleSearchError(error);
+    }
+}
+```
+
+### Error Handling
+```javascript
+if (!response.ok) {
+    throw new Error(`API Error: ${response.status} ${response.statusText}`);
+}
+```
+
+### Infinite Scroll Implementation
+```javascript
+shouldLoadMoreImages() {
+    const scrollTop = window.pageYOffset;
+    const windowHeight = window.innerHeight;
+    const documentHeight = document.documentElement.scrollHeight;
+
+    return scrollTop + windowHeight >= documentHeight - 1000;
+}
+```
+
+### Responsive CSS Grid
+```css
+.image-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 2rem;
+}
+```
+
+## 🎨 Responsive Design Features
+
+- **Desktop**: 4-5 columns with larger images
+- **Tablet**: 2-3 columns with medium images
+- **Mobile**: Single column with optimized spacing
+- **Touch-friendly**: Large buttons and touch targets
+- **Performance**: Lazy loading and optimized images
+
+## 🚨 Error Scenarios Handled
+
+1. **Invalid API Key**: Clear message to configure API key
+2. **Network Errors**: Retry functionality
+3. **API Quota Exceeded**: Informative message about limits
+4. **No Results Found**: Helpful suggestions for better search terms
+5. **Empty Search Query**: Validation with user feedback
+
+## 🔍 Search Suggestions
+
+Try these search terms to see the app in action:
+- nature
+- technology
+- animals
+- architecture
+- food
+- travel
+- abstract
+- minimal
+
+## 🌟 Bonus Features Implemented
+
+✅ **Infinite Scroll**: Loads more images automatically
+✅ **Loading Indicators**: Visual feedback during requests
+✅ **Full-size Image Modal**: Click any image for larger view
+✅ **Keyboard Navigation**: Enter to search, Escape to close modal
+✅ **Smooth Animations**: Fade-in effects and hover states
+✅ **Accessibility**: Proper focus states and ARIA attributes
+
+## 📱 Browser Support
+
+- Chrome (recommended)
+- Firefox
+- Safari
+- Edge
+- Modern mobile browsers
+
+## 🔧 Customization
+
+Feel free to customize:
+- Colors and styling in `styles.css`
+- API parameters in `script.js`
+- Grid layout breakpoints
+- Animation timings and effects
+
+## 📚 Learning Outcomes
+
+After studying this example, you'll understand:
+- Modern JavaScript async patterns
+- RESTful API integration
+- Responsive CSS Grid layouts
+- DOM manipulation techniques
+- Error handling strategies
+- UX/UI best practices
+
+---
+
+**Happy coding!** 🎉
diff --git a/examples/Image-Search-App/index.html b/examples/Image-Search-App/index.html
new file mode 100644
index 00000000..e6eec431
--- /dev/null
+++ b/examples/Image-Search-App/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Search App</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <header class="header">
+            <h1 class="title">Image Search</h1>
+            <p class="subtitle">Discover amazing images from around the world</p>
+
+            <div class="search-container">
+                <div class="search-wrapper">
+                    <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <path d="m21 21-4.35-4.35"></path>
+                    </svg>
+                    <input
+                        type="text"
+                        id="searchInput"
+                        placeholder="Search for images... (e.g., nature, technology, animals)"
+                        class="search-input"
+                        autocomplete="off"
+                    >
+                    <button id="searchButton" class="search-button">
+                        Search
+                    </button>
+                </div>
+            </div>
+        </header>
+
+        <main class="main-content">
+            <div id="loadingIndicator" class="loading-indicator">
+                <div class="spinner"></div>
+                <p>Searching for images...</p>
+            </div>
+
+            <div id="errorMessage" class="error-message" style="display: none;">
+                <div class="error-content">
+                    <svg class="error-icon" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <line x1="15" y1="9" x2="9" y2="15"></line>
+                        <line x1="9" y1="9" x2="15" y2="15"></line>
+                    </svg>
+                    <h3>Oops! Something went wrong</h3>
+                    <p id="errorText">Please check your internet connection and try again.</p>
+                    <button id="retryButton" class="retry-button">Try Again</button>
+                </div>
+            </div>
+
+            <div id="noResults" class="no-results" style="display: none;">
+                <div class="no-results-content">
+                    <svg class="no-results-icon" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <path d="m21 21-4.35-4.35"></path>
+                        <path d="M11 8a3 3 0 1 1 0 6"></path>
+                    </svg>
+                    <h3>No images found</h3>
+                    <p>Try searching for something else or use different keywords.</p>
+                </div>
+            </div>
+
+            <div id="imageGrid" class="image-grid">
+                <!-- Images will be dynamically inserted here -->
+            </div>
+
+            <div id="loadMoreContainer" class="load-more-container" style="display: none;">
+                <button id="loadMoreButton" class="load-more-button">
+                    <div class="load-more-spinner"></div>
+                    Load More Images
+                </button>
+            </div>
+        </main>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/examples/Image-Search-App/script.js b/examples/Image-Search-App/script.js
new file mode 100644
index 00000000..02e9ead1
--- /dev/null
+++ b/examples/Image-Search-App/script.js
@@ -0,0 +1,460 @@
+// Image Search App - JavaScript
+// Demonstrates API integration, async/await, error handling, and responsive UI
+
+class ImageSearchApp {
+    constructor() {
+        this.API_KEY = 'YOUR_UNSPLASH_ACCESS_KEY'; // Get your free API key from https://unsplash.com/developers
+        this.BASE_URL = 'https://api.unsplash.com/search/photos';
+        this.currentPage = 1;
+        this.currentQuery = '';
+        this.isLoading = false;
+        this.hasMoreImages = true;
+
+        this.initializeElements();
+        this.bindEvents();
+        this.showWelcomeMessage();
+    }
+
+    initializeElements() {
+        this.searchInput = document.getElementById('searchInput');
+        this.searchButton = document.getElementById('searchButton');
+        this.imageGrid = document.getElementById('imageGrid');
+        this.loadingIndicator = document.getElementById('loadingIndicator');
+        this.errorMessage = document.getElementById('errorMessage');
+        this.errorText = document.getElementById('errorText');
+        this.retryButton = document.getElementById('retryButton');
+        this.noResults = document.getElementById('noResults');
+        this.loadMoreContainer = document.getElementById('loadMoreContainer');
+        this.loadMoreButton = document.getElementById('loadMoreButton');
+    }
+
+    bindEvents() {
+        // Search functionality
+        this.searchButton.addEventListener('click', () => this.performSearch());
+        this.searchInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                this.performSearch();
+            }
+        });
+
+        // Retry functionality
+        this.retryButton.addEventListener('click', () => {
+            if (this.currentQuery) {
+                this.performSearch(this.currentQuery);
+            }
+        });
+
+        // Infinite scroll
+        this.loadMoreButton.addEventListener('click', () => this.loadMoreImages());
+
+        // Initialize infinite scroll
+        this.initializeInfiniteScroll();
+    }
+
+    initializeInfiniteScroll() {
+        let timeoutId;
+        window.addEventListener('scroll', () => {
+            // Debounce scroll events
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => {
+                if (this.shouldLoadMoreImages()) {
+                    this.loadMoreImages();
+                }
+            }, 150);
+        });
+    }
+
+    shouldLoadMoreImages() {
+        // Check if user scrolled near bottom and we're not currently loading
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        const windowHeight = window.innerHeight;
+        const documentHeight = document.documentElement.scrollHeight;
+
+        return (
+            scrollTop + windowHeight >= documentHeight - 1000 &&
+            !this.isLoading &&
+            this.hasMoreImages &&
+            this.currentQuery
+        );
+    }
+
+    async performSearch(query = null) {
+        const searchTerm = query || this.searchInput.value.trim();
+
+        if (!searchTerm) {
+            this.showError('Please enter a search term');
+            return;
+        }
+
+        if (!this.API_KEY || this.API_KEY === 'YOUR_UNSPLASH_ACCESS_KEY') {
+            this.showError('Please set your Unsplash API key in the script.js file');
+            return;
+        }
+
+        this.currentQuery = searchTerm;
+        this.currentPage = 1;
+        this.hasMoreImages = true;
+
+        this.showLoadingState();
+        this.clearResults();
+
+        try {
+            const images = await this.fetchImages(searchTerm, 1);
+
+            if (images.length === 0) {
+                this.showNoResults();
+            } else {
+                this.displayImages(images);
+                this.showLoadMoreButton();
+            }
+        } catch (error) {
+            this.handleSearchError(error);
+        } finally {
+            this.hideLoadingState();
+        }
+    }
+
+    async fetchImages(query, page) {
+        const url = new URL(this.BASE_URL);
+        url.searchParams.set('query', query);
+        url.searchParams.set('page', page);
+        url.searchParams.set('per_page', '12');
+        url.searchParams.set('orientation', 'landscape');
+
+        const response = await fetch(url, {
+            headers: {
+                'Authorization': `Client-ID ${this.API_KEY}`
+            }
+        });
+
+        if (!response.ok) {
+            throw new Error(`API Error: ${response.status} ${response.statusText}`);
+        }
+
+        const data = await response.json();
+        return data.results || [];
+    }
+
+    async loadMoreImages() {
+        if (this.isLoading || !this.hasMoreImages || !this.currentQuery) {
+            return;
+        }
+
+        this.isLoading = true;
+        this.showLoadMoreLoadingState();
+
+        try {
+            const nextPage = this.currentPage + 1;
+            const images = await this.fetchImages(this.currentQuery, nextPage);
+
+            if (images.length === 0) {
+                this.hasMoreImages = false;
+                this.hideLoadMoreButton();
+            } else {
+                this.displayImages(images, true);
+                this.currentPage = nextPage;
+            }
+        } catch (error) {
+            this.handleLoadMoreError(error);
+        } finally {
+            this.isLoading = false;
+            this.hideLoadMoreLoadingState();
+        }
+    }
+
+    displayImages(images, append = false) {
+        if (!append) {
+            this.imageGrid.innerHTML = '';
+        }
+
+        images.forEach(image => {
+            const imageElement = this.createImageElement(image);
+            this.imageGrid.appendChild(imageElement);
+        });
+
+        // Animate new images
+        setTimeout(() => {
+            const imageItems = this.imageGrid.querySelectorAll('.image-item');
+            imageItems.forEach((item, index) => {
+                if (append && item.style.opacity !== '1') {
+                    item.style.opacity = '0';
+                    item.style.transform = 'translateY(20px)';
+                    setTimeout(() => {
+                        item.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+                        item.style.opacity = '1';
+                        item.style.transform = 'translateY(0)';
+                    }, index * 100);
+                }
+            });
+        }, 50);
+    }
+
+    createImageElement(image) {
+        const imageItem = document.createElement('div');
+        imageItem.className = 'image-item';
+        imageItem.style.opacity = '0';
+        imageItem.style.transform = 'translateY(20px)';
+
+        const imageUrl = image.urls.regular;
+        const thumbnailUrl = image.urls.thumb;
+        const description = image.description || image.alt_description || 'Beautiful image';
+        const authorName = image.user.name;
+
+        imageItem.innerHTML = `
+            <div class="image-container">
+                <img src="${thumbnailUrl}" alt="${description}" loading="lazy" onload="this.parentElement.parentElement.style.transition='opacity 0.6s ease, transform 0.6s ease'; this.parentElement.parentElement.style.opacity='1'; this.parentElement.parentElement.style.transform='translateY(0)';">
+            </div>
+            <div class="image-info">
+                <div class="image-description">${this.escapeHtml(description)}</div>
+                <div class="image-author">Photo by ${this.escapeHtml(authorName)}</div>
+            </div>
+        `;
+
+        // Add click handler for full-size view (bonus feature)
+        imageItem.addEventListener('click', () => {
+            this.openFullSizeImage(imageUrl, description, authorName);
+        });
+
+        return imageItem;
+    }
+
+    openFullSizeImage(imageUrl, description, authorName) {
+        // Create modal for full-size image view
+        const modal = document.createElement('div');
+        modal.className = 'image-modal';
+        modal.innerHTML = `
+            <div class="modal-overlay">
+                <div class="modal-content">
+                    <button class="modal-close">&times;</button>
+                    <img src="${imageUrl}" alt="${description}" class="modal-image">
+                    <div class="modal-info">
+                        <p class="modal-description">${this.escapeHtml(description)}</p>
+                        <p class="modal-author">Photo by ${this.escapeHtml(authorName)}</p>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        // Add modal styles
+        const modalStyles = `
+            .image-modal {
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                z-index: 1000;
+                animation: fadeIn 0.3s ease;
+            }
+            .modal-overlay {
+                background: rgba(0, 0, 0, 0.9);
+                width: 100%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 2rem;
+            }
+            .modal-content {
+                position: relative;
+                max-width: 90vw;
+                max-height: 90vh;
+            }
+            .modal-close {
+                position: absolute;
+                top: -40px;
+                right: 0;
+                background: none;
+                border: none;
+                color: white;
+                font-size: 2rem;
+                cursor: pointer;
+                z-index: 1001;
+            }
+            .modal-image {
+                max-width: 100%;
+                max-height: 70vh;
+                object-fit: contain;
+                border-radius: 8px;
+            }
+            .modal-info {
+                margin-top: 1rem;
+                text-align: center;
+                color: white;
+            }
+            .modal-description {
+                font-size: 1.1rem;
+                margin-bottom: 0.5rem;
+            }
+            .modal-author {
+                font-size: 0.9rem;
+                opacity: 0.8;
+            }
+            @keyframes fadeIn {
+                from { opacity: 0; }
+                to { opacity: 1; }
+            }
+        `;
+
+        // Add styles to head if not already present
+        if (!document.querySelector('#modal-styles')) {
+            const styleElement = document.createElement('style');
+            styleElement.id = 'modal-styles';
+            styleElement.textContent = modalStyles;
+            document.head.appendChild(styleElement);
+        }
+
+        document.body.appendChild(modal);
+
+        // Close modal functionality
+        modal.querySelector('.modal-close').addEventListener('click', () => {
+            document.body.removeChild(modal);
+        });
+
+        modal.querySelector('.modal-overlay').addEventListener('click', (e) => {
+            if (e.target === e.currentTarget) {
+                document.body.removeChild(modal);
+            }
+        });
+
+        // Close on escape key
+        const escapeHandler = (e) => {
+            if (e.key === 'Escape') {
+                document.body.removeChild(modal);
+                document.removeEventListener('keydown', escapeHandler);
+            }
+        };
+        document.addEventListener('keydown', escapeHandler);
+    }
+
+    showLoadingState() {
+        this.loadingIndicator.style.display = 'flex';
+        this.errorMessage.style.display = 'none';
+        this.noResults.style.display = 'none';
+        this.loadMoreContainer.style.display = 'none';
+    }
+
+    hideLoadingState() {
+        this.loadingIndicator.style.display = 'none';
+    }
+
+    showError(message) {
+        this.errorText.textContent = message;
+        this.errorMessage.style.display = 'flex';
+        this.loadingIndicator.style.display = 'none';
+        this.noResults.style.display = 'none';
+        this.loadMoreContainer.style.display = 'none';
+    }
+
+    showNoResults() {
+        this.noResults.style.display = 'flex';
+        this.errorMessage.style.display = 'none';
+        this.loadingIndicator.style.display = 'none';
+        this.loadMoreContainer.style.display = 'none';
+    }
+
+    showLoadMoreButton() {
+        this.loadMoreContainer.style.display = 'flex';
+    }
+
+    hideLoadMoreButton() {
+        this.loadMoreContainer.style.display = 'none';
+    }
+
+    showLoadMoreLoadingState() {
+        this.loadMoreButton.innerHTML = `
+            <div class="load-more-spinner"></div>
+            Loading...
+        `;
+        this.loadMoreButton.disabled = true;
+    }
+
+    hideLoadMoreLoadingState() {
+        this.loadMoreButton.innerHTML = `
+            <div class="load-more-spinner" style="display: none;"></div>
+            Load More Images
+        `;
+        this.loadMoreButton.disabled = false;
+    }
+
+    clearResults() {
+        this.imageGrid.innerHTML = '';
+    }
+
+    showWelcomeMessage() {
+        // Show a welcome message with example searches
+        const welcomeDiv = document.createElement('div');
+        welcomeDiv.className = 'welcome-message';
+        welcomeDiv.innerHTML = `
+            <div style="text-align: center; color: white; padding: 2rem; background: rgba(255,255,255,0.1); border-radius: 16px; margin-bottom: 2rem;">
+                <h2 style="margin-bottom: 1rem; font-size: 1.5rem;">Welcome to Image Search!</h2>
+                <p style="margin-bottom: 1rem;">Try searching for: nature, technology, animals, architecture, food, travel</p>
+                <p style="font-size: 0.9rem; opacity: 0.8;">💡 Tip: Click on any image to view it in full size</p>
+            </div>
+        `;
+        this.imageGrid.appendChild(welcomeDiv);
+    }
+
+    handleSearchError(error) {
+        console.error('Search error:', error);
+        let errorMessage = 'Failed to search for images. Please try again.';
+
+        if (error.message.includes('API Error: 401')) {
+            errorMessage = 'Invalid API key. Please check your Unsplash API key.';
+        } else if (error.message.includes('API Error: 403')) {
+            errorMessage = 'API quota exceeded. Please try again later.';
+        } else if (error.message.includes('Failed to fetch')) {
+            errorMessage = 'Network error. Please check your internet connection.';
+        }
+
+        this.showError(errorMessage);
+    }
+
+    handleLoadMoreError(error) {
+        console.error('Load more error:', error);
+        // Show a subtle error for load more (don't replace existing content)
+        this.loadMoreButton.innerHTML = 'Error loading more images. Try again.';
+        setTimeout(() => {
+            this.loadMoreButton.innerHTML = `
+                <div class="load-more-spinner" style="display: none;"></div>
+                Load More Images
+            `;
+        }, 3000);
+    }
+
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+}
+
+// Initialize the app when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    const app = new ImageSearchApp();
+
+    // Add some CSS animations for better UX
+    const style = document.createElement('style');
+    style.textContent = `
+        .image-item {
+            animation: fadeInUp 0.6s ease forwards;
+        }
+
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+    `;
+    document.head.appendChild(style);
+});
+
+// Export for potential testing or module usage
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = ImageSearchApp;
+}
diff --git a/examples/Image-Search-App/styles.css b/examples/Image-Search-App/styles.css
new file mode 100644
index 00000000..3898b831
--- /dev/null
+++ b/examples/Image-Search-App/styles.css
@@ -0,0 +1,407 @@
+/* Reset and base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    line-height: 1.6;
+    color: #1f2937;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+}
+
+/* Container */
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+/* Header */
+.header {
+    text-align: center;
+    padding: 3rem 0 2rem;
+    color: white;
+}
+
+.title {
+    font-size: clamp(2.5rem, 5vw, 4rem);
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.subtitle {
+    font-size: 1.1rem;
+    opacity: 0.9;
+    margin-bottom: 2rem;
+    font-weight: 300;
+}
+
+/* Search container */
+.search-container {
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.search-wrapper {
+    position: relative;
+    display: flex;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-radius: 50px;
+    padding: 8px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.search-icon {
+    color: #6b7280;
+    margin: 0 16px;
+    align-self: center;
+    flex-shrink: 0;
+}
+
+.search-input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    padding: 16px 0;
+    font-size: 16px;
+    color: #1f2937;
+    font-family: inherit;
+}
+
+.search-input::placeholder {
+    color: #9ca3af;
+}
+
+.search-button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    padding: 16px 32px;
+    border-radius: 50px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-left: 8px;
+    white-space: nowrap;
+}
+
+.search-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+}
+
+.search-button:active {
+    transform: translateY(0);
+}
+
+/* Main content */
+.main-content {
+    padding-bottom: 3rem;
+}
+
+/* Loading indicator */
+.loading-indicator {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 4rem 2rem;
+    color: white;
+    text-align: center;
+}
+
+.spinner {
+    width: 48px;
+    height: 48px;
+    border: 4px solid rgba(255, 255, 255, 0.3);
+    border-top: 4px solid white;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 1rem;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Error message */
+.error-message {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 400px;
+}
+
+.error-content {
+    text-align: center;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    padding: 3rem;
+    border-radius: 20px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    max-width: 500px;
+}
+
+.error-icon {
+    color: #ef4444;
+    margin-bottom: 1rem;
+}
+
+.error-content h3 {
+    color: #1f2937;
+    margin-bottom: 0.5rem;
+    font-size: 1.5rem;
+}
+
+.error-content p {
+    color: #6b7280;
+    margin-bottom: 1.5rem;
+}
+
+.retry-button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 50px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.retry-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+}
+
+/* No results */
+.no-results {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 400px;
+}
+
+.no-results-content {
+    text-align: center;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    padding: 3rem;
+    border-radius: 20px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    max-width: 500px;
+}
+
+.no-results-icon {
+    color: #9ca3af;
+    margin-bottom: 1rem;
+}
+
+.no-results-content h3 {
+    color: #1f2937;
+    margin-bottom: 0.5rem;
+    font-size: 1.5rem;
+}
+
+.no-results-content p {
+    color: #6b7280;
+}
+
+/* Image grid */
+.image-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 2rem;
+    padding: 2rem 0;
+}
+
+.image-item {
+    background: white;
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.image-item:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+}
+
+.image-container {
+    position: relative;
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+}
+
+.image-container img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+}
+
+.image-item:hover .image-container img {
+    transform: scale(1.05);
+}
+
+.image-info {
+    padding: 1.5rem;
+}
+
+.image-description {
+    font-size: 0.9rem;
+    color: #6b7280;
+    margin-bottom: 0.5rem;
+    /* Multi-line text truncation using webkit for maximum browser compatibility */
+    display: -webkit-box;
+    display: block;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    /* Ensure consistent behavior across browsers */
+    text-overflow: ellipsis;
+}
+
+.image-author {
+    font-size: 0.85rem;
+    color: #9ca3af;
+    font-weight: 500;
+}
+
+/* Load more button */
+.load-more-container {
+    display: flex;
+    justify-content: center;
+    padding: 2rem 0;
+}
+
+.load-more-button {
+    background: rgba(255, 255, 255, 0.2);
+    color: white;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    padding: 16px 32px;
+    border-radius: 50px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.load-more-button:hover {
+    background: rgba(255, 255, 255, 0.3);
+    border-color: rgba(255, 255, 255, 0.5);
+    transform: translateY(-2px);
+}
+
+.load-more-spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-top: 2px solid white;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .container {
+        padding: 0 16px;
+    }
+
+    .header {
+        padding: 2rem 0 1.5rem;
+    }
+
+    .title {
+        font-size: 2.5rem;
+    }
+
+    .search-wrapper {
+        flex-direction: column;
+        padding: 16px;
+        gap: 12px;
+    }
+
+    .search-input {
+        padding: 12px 0;
+    }
+
+    .search-button {
+        margin-left: 0;
+        padding: 14px 24px;
+    }
+
+    .image-grid {
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        gap: 1.5rem;
+        padding: 1.5rem 0;
+    }
+
+    .image-container {
+        height: 180px;
+    }
+
+    .error-content,
+    .no-results-content {
+        padding: 2rem;
+        margin: 0 16px;
+    }
+}
+
+@media (max-width: 480px) {
+    .title {
+        font-size: 2rem;
+    }
+
+    .image-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+
+    .image-container {
+        height: 200px;
+    }
+}
+
+/* Focus states for accessibility */
+.search-input:focus,
+.search-button:focus,
+.retry-button:focus,
+.load-more-button:focus {
+    outline: 2px solid rgba(255, 255, 255, 0.8);
+    outline-offset: 2px;
+}
+
+/* Loading skeleton animation */
+@keyframes shimmer {
+    0% {
+        background-position: -200px 0;
+    }
+    100% {
+        background-position: calc(200px + 100%) 0;
+    }
+}
+
+.loading-skeleton {
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200px 100%;
+    animation: shimmer 1.5s infinite;
+}

From ed126b6e98e28b09b1ff868864b255f28d8a3ee8 Mon Sep 17 00:00:00 2001
From: Surya Prakash Kahar
 <149003440+suryaprakash0010@users.noreply.github.com>
Date: Mon, 6 Oct 2025 09:10:06 +0530
Subject: [PATCH 2/3] Update script.js

---
 examples/Image-Search-App/script.js | 133 +++++++++++++++++-----------
 1 file changed, 82 insertions(+), 51 deletions(-)

diff --git a/examples/Image-Search-App/script.js b/examples/Image-Search-App/script.js
index 02e9ead1..4c76c2f3 100644
--- a/examples/Image-Search-App/script.js
+++ b/examples/Image-Search-App/script.js
@@ -189,34 +189,38 @@ class ImageSearchApp {
         }, 50);
     }
 
-    createImageElement(image) {
-        const imageItem = document.createElement('div');
-        imageItem.className = 'image-item';
-        imageItem.style.opacity = '0';
-        imageItem.style.transform = 'translateY(20px)';
-
-        const imageUrl = image.urls.regular;
-        const thumbnailUrl = image.urls.thumb;
-        const description = image.description || image.alt_description || 'Beautiful image';
-        const authorName = image.user.name;
-
-        imageItem.innerHTML = `
-            <div class="image-container">
-                <img src="${thumbnailUrl}" alt="${description}" loading="lazy" onload="this.parentElement.parentElement.style.transition='opacity 0.6s ease, transform 0.6s ease'; this.parentElement.parentElement.style.opacity='1'; this.parentElement.parentElement.style.transform='translateY(0)';">
-            </div>
-            <div class="image-info">
-                <div class="image-description">${this.escapeHtml(description)}</div>
-                <div class="image-author">Photo by ${this.escapeHtml(authorName)}</div>
-            </div>
-        `;
-
-        // Add click handler for full-size view (bonus feature)
-        imageItem.addEventListener('click', () => {
-            this.openFullSizeImage(imageUrl, description, authorName);
-        });
+ createImageElement(image) {
+    const imageItem = document.createElement('div');
+    imageItem.className = 'image-item';
+    imageItem.style.opacity = '0';
+    imageItem.style.transform = 'translateY(20px)';
+    imageItem.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+
+    const imageUrl = image.urls.regular;
+    const thumbnailUrl = image.urls.thumb;
+    const description = image.description || image.alt_description || 'Beautiful image';
+    const authorName = image.user.name;
+
+    const imageContainer = document.createElement('div');
+    imageContainer.className = 'image-container';
+
+    const img = document.createElement('img');
+    img.src = thumbnailUrl;
+    img.alt = description;
+    img.loading = 'lazy';
+
+    // Add load event listener for animation
+    img.addEventListener('load', () => {
+        imageItem.style.opacity = '1';
+        imageItem.style.transform = 'translateY(0)';
+    });
+
+    imageContainer.appendChild(img);
+    imageItem.appendChild(imageContainer);
+
+    return imageItem;
+}
 
-        return imageItem;
-    }
 
     openFullSizeImage(imageUrl, description, authorName) {
         // Create modal for full-size image view
@@ -304,19 +308,35 @@ class ImageSearchApp {
             document.head.appendChild(styleElement);
         }
 
-        document.body.appendChild(modal);
-
-        // Close modal functionality
-        modal.querySelector('.modal-close').addEventListener('click', () => {
-            document.body.removeChild(modal);
-        });
-
-        modal.querySelector('.modal-overlay').addEventListener('click', (e) => {
-            if (e.target === e.currentTarget) {
-                document.body.removeChild(modal);
-            }
-        });
-
+        Using removeChild without checking if the element still exists could throw an error if the modal has already been removed. Use modal.remove() or check for element existence before removal.
+Suggested change
+	            document.body.removeChild(modal);
+	        });
+	
+	        modal.querySelector('.modal-overlay').addEventListener('click', (e) => {
+	            if (e.target === e.currentTarget) {
+	                document.body.removeChild(modal);
+	            }
+	        });
+	
+	        const escapeHandler = (e) => {
+	            if (e.key === 'Escape') {
+	                document.body.removeChild(modal);
+	            modal.remove();
+	        });
+	
+	        modal.querySelector('.modal-overlay').addEventListener('click', (e) => {
+	            if (e.target === e.currentTarget) {
+	                modal.remove();
+	            }
+	        });
+	
+	        // Close on escape key
+	        const escapeHandler = (e) => {
+	            if (e.key === 'Escape') {
+	                modal.remove();
+Commit suggestion
+Add suggestion to batch
         // Close on escape key
         const escapeHandler = (e) => {
             if (e.key === 'Escape') {
@@ -410,17 +430,28 @@ class ImageSearchApp {
         this.showError(errorMessage);
     }
 
-    handleLoadMoreError(error) {
-        console.error('Load more error:', error);
-        // Show a subtle error for load more (don't replace existing content)
-        this.loadMoreButton.innerHTML = 'Error loading more images. Try again.';
-        setTimeout(() => {
-            this.loadMoreButton.innerHTML = `
-                <div class="load-more-spinner" style="display: none;"></div>
-                Load More Images
-            `;
-        }, 3000);
-    }
+   handleLoadMoreError(error) {
+    console.error('Load more error:', error);
+
+    this.loadMoreButton.textContent = 'Error loading more images. Try again.';
+
+    setTimeout(() => {
+        this.loadMoreButton.innerHTML = `
+            <div class="load-more-spinner hidden"></div>
+        `;
+    }, 2000); 
+}
+
+showSpinner() {
+    const spinner = this.loadMoreButton.querySelector('.load-more-spinner');
+    if (spinner) spinner.classList.remove('hidden');
+}
+
+hideSpinner() {
+    const spinner = this.loadMoreButton.querySelector('.load-more-spinner');
+    if (spinner) spinner.classList.add('hidden');
+}
+
 
     escapeHtml(text) {
         const div = document.createElement('div');

From 3a8cf9f13d7112ead702f8e5cad9e13b830a37d5 Mon Sep 17 00:00:00 2001
From: Surya Prakash Kahar
 <149003440+suryaprakash0010@users.noreply.github.com>
Date: Mon, 6 Oct 2025 09:11:46 +0530
Subject: [PATCH 3/3] Update styles.css

---
 examples/Image-Search-App/styles.css | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/examples/Image-Search-App/styles.css b/examples/Image-Search-App/styles.css
index 3898b831..33c6a619 100644
--- a/examples/Image-Search-App/styles.css
+++ b/examples/Image-Search-App/styles.css
@@ -266,13 +266,15 @@ body {
     font-size: 0.9rem;
     color: #6b7280;
     margin-bottom: 0.5rem;
-    /* Multi-line text truncation using webkit for maximum browser compatibility */
-    display: -webkit-box;
-    display: block;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
+  
+display: -webkit-box;        
+-webkit-box-orient: vertical;  
+-webkit-line-clamp: 2;         
+overflow: hidden;              
+
+/* Optional fallback for non-webkit browsers */
+line-clamp: 2;                  /* Future standard (not widely supported yet) */
+
     /* Ensure consistent behavior across browsers */
     text-overflow: ellipsis;
 }