Skip to content

README.md

Latest commit

 

History

History
185 lines (146 loc) · 5.25 KB

README.md

File metadata and controls

185 lines (146 loc) · 5.25 KB

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
    • 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:
    this.API_KEY = 'your_actual_api_key_here';

  3. Serve locally & open in browser: Modern browsers may block some fetch requests when opening files directly from disk. It's recommended to serve the folder with a simple static server and open http://localhost:8000.

    Using Python 3 (recommended):

    cd examples/Image-Search-App
python3 -m http.server 8000
# then open http://localhost:8000

    Or use VS Code Live Server or npx http-server.

🎯 API Integration Details

The app uses the Unsplash Search Photos API:

// 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

async performSearch(query) {
    try {
        const images = await this.fetchImages(query, page);
        this.displayImages(images);
    } catch (error) {
        this.handleSearchError(error);
    }
}

Error Handling

if (!response.ok) {
    throw new Error(`API Error: ${response.status} ${response.statusText}`);
}

Infinite Scroll Implementation

shouldLoadMoreImages() {
    const scrollTop = window.pageYOffset;
    const windowHeight = window.innerHeight;
    const documentHeight = document.documentElement.scrollHeight;

    return scrollTop + windowHeight >= documentHeight - 1000;
}

Responsive CSS Grid

.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

  • Colors and styling in style.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! 🎉