|
| 1 | +# Image Search App |
| 2 | + |
| 3 | +A modern, responsive image search application that demonstrates API integration, asynchronous JavaScript, and responsive UI design concepts. |
| 4 | + |
| 5 | +## 🚀 Features |
| 6 | + |
| 7 | +- **Dynamic Image Search**: Search for images using keywords |
| 8 | +- **Real-time Results**: Fetches and displays images instantly |
| 9 | +- **Responsive Grid Layout**: Beautiful masonry-style grid that adapts to all screen sizes |
| 10 | +- **Infinite Scroll**: Automatically loads more images as you scroll |
| 11 | +- **Loading Indicators**: Visual feedback during API requests |
| 12 | +- **Error Handling**: Comprehensive error handling for API failures and network issues |
| 13 | +- **Full-size Image View**: Click any image to view it in full size with modal overlay |
| 14 | +- **Modern UI**: Glass morphism design with smooth animations and transitions |
| 15 | + |
| 16 | +## 🛠 Technologies Demonstrated |
| 17 | + |
| 18 | +- **Fetch API & Async/Await**: Modern JavaScript for API requests |
| 19 | +- **DOM Manipulation**: Dynamic content creation and updates |
| 20 | +- **CSS Grid & Flexbox**: Responsive layout design |
| 21 | +- **CSS Animations**: Smooth transitions and loading states |
| 22 | +- **Event Handling**: Search, scroll, and click interactions |
| 23 | +- **Error Handling**: Try-catch blocks and user-friendly error messages |
| 24 | +- **Responsive Design**: Mobile-first approach with media queries |
| 25 | + |
| 26 | +## 📁 Project Structure |
| 27 | + |
| 28 | +``` |
| 29 | +Image-Search-App/ |
| 30 | +├── index.html # Main HTML structure |
| 31 | +├── styles.css # Responsive CSS with modern design |
| 32 | +└── script.js # JavaScript logic and API integration |
| 33 | +``` |
| 34 | + |
| 35 | +## 🔧 Setup Instructions |
| 36 | + |
| 37 | +1. **Get Unsplash API Key**: |
| 38 | + - Visit [Unsplash Developers](https://unsplash.com/developers) |
| 39 | + - Create a free account and register your application |
| 40 | + - Copy your Access Key |
| 41 | + |
| 42 | +2. **Configure API Key**: |
| 43 | + - Open `script.js` |
| 44 | + - Replace `YOUR_UNSPLASH_ACCESS_KEY` with your actual API key: |
| 45 | + ```javascript |
| 46 | + this.API_KEY = 'your_actual_api_key_here'; |
| 47 | + ``` |
| 48 | + |
| 49 | +3. **Serve locally & open in browser**: |
| 50 | + 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. |
| 51 | +
|
| 52 | + Using Python 3 (recommended): |
| 53 | + ```bash |
| 54 | + cd examples/Image-Search-App |
| 55 | + python3 -m http.server 8000 |
| 56 | + # then open http://localhost:8000 |
| 57 | + ``` |
| 58 | +
|
| 59 | + Or use VS Code Live Server or `npx http-server`. |
| 60 | +
|
| 61 | +## 🎯 API Integration Details |
| 62 | +
|
| 63 | +The app uses the Unsplash Search Photos API: |
| 64 | +
|
| 65 | +```javascript |
| 66 | +// Example API call structure |
| 67 | +const response = await fetch('https://api.unsplash.com/search/photos', { |
| 68 | + headers: { |
| 69 | + 'Authorization': `Client-ID ${API_KEY}` |
| 70 | + } |
| 71 | +}); |
| 72 | +``` |
| 73 | + |
| 74 | +**Parameters used:** |
| 75 | +- `query`: Search term (e.g., "nature", "technology") |
| 76 | +- `page`: Page number for pagination |
| 77 | +- `per_page`: Number of results (12 per page) |
| 78 | +- `orientation`: "landscape" for consistent layout |
| 79 | + |
| 80 | +## 💡 Key Code Concepts |
| 81 | + |
| 82 | +### Async/Await Pattern |
| 83 | +```javascript |
| 84 | +async performSearch(query) { |
| 85 | + try { |
| 86 | + const images = await this.fetchImages(query, page); |
| 87 | + this.displayImages(images); |
| 88 | + } catch (error) { |
| 89 | + this.handleSearchError(error); |
| 90 | + } |
| 91 | +} |
| 92 | +``` |
| 93 | + |
| 94 | +### Error Handling |
| 95 | +```javascript |
| 96 | +if (!response.ok) { |
| 97 | + throw new Error(`API Error: ${response.status} ${response.statusText}`); |
| 98 | +} |
| 99 | +``` |
| 100 | + |
| 101 | +### Infinite Scroll Implementation |
| 102 | +```javascript |
| 103 | +shouldLoadMoreImages() { |
| 104 | + const scrollTop = window.pageYOffset; |
| 105 | + const windowHeight = window.innerHeight; |
| 106 | + const documentHeight = document.documentElement.scrollHeight; |
| 107 | + |
| 108 | + return scrollTop + windowHeight >= documentHeight - 1000; |
| 109 | +} |
| 110 | +``` |
| 111 | + |
| 112 | +### Responsive CSS Grid |
| 113 | +```css |
| 114 | +.image-grid { |
| 115 | + display: grid; |
| 116 | + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); |
| 117 | + gap: 2rem; |
| 118 | +} |
| 119 | +``` |
| 120 | + |
| 121 | +## 🎨 Responsive Design Features |
| 122 | + |
| 123 | +- **Desktop**: 4-5 columns with larger images |
| 124 | +- **Tablet**: 2-3 columns with medium images |
| 125 | +- **Mobile**: Single column with optimized spacing |
| 126 | +- **Touch-friendly**: Large buttons and touch targets |
| 127 | +- **Performance**: Lazy loading and optimized images |
| 128 | + |
| 129 | +## 🚨 Error Scenarios Handled |
| 130 | + |
| 131 | +1. **Invalid API Key**: Clear message to configure API key |
| 132 | +2. **Network Errors**: Retry functionality |
| 133 | +3. **API Quota Exceeded**: Informative message about limits |
| 134 | +4. **No Results Found**: Helpful suggestions for better search terms |
| 135 | +5. **Empty Search Query**: Validation with user feedback |
| 136 | + |
| 137 | +## 🔍 Search Suggestions |
| 138 | + |
| 139 | +Try these search terms to see the app in action: |
| 140 | +- nature |
| 141 | +- technology |
| 142 | +- animals |
| 143 | +- architecture |
| 144 | +- food |
| 145 | +- travel |
| 146 | +- abstract |
| 147 | +- minimal |
| 148 | + |
| 149 | +## 🌟 Bonus Features Implemented |
| 150 | + |
| 151 | +✅ **Infinite Scroll**: Loads more images automatically |
| 152 | +✅ **Loading Indicators**: Visual feedback during requests |
| 153 | +✅ **Full-size Image Modal**: Click any image for larger view |
| 154 | +✅ **Keyboard Navigation**: Enter to search, Escape to close modal |
| 155 | +✅ **Smooth Animations**: Fade-in effects and hover states |
| 156 | +✅ **Accessibility**: Proper focus states and ARIA attributes |
| 157 | + |
| 158 | +## 📱 Browser Support |
| 159 | + |
| 160 | +- Chrome (recommended) |
| 161 | +- Firefox |
| 162 | +- Safari |
| 163 | +- Edge |
| 164 | +- Modern mobile browsers |
| 165 | + |
| 166 | +## 🔧 Customization |
| 167 | + |
| 168 | +- Colors and styling in `style.css` |
| 169 | +- API parameters in `script.js` |
| 170 | +- Grid layout breakpoints |
| 171 | +- Animation timings and effects |
| 172 | + |
| 173 | +## 📚 Learning Outcomes |
| 174 | + |
| 175 | +After studying this example, you'll understand: |
| 176 | +- Modern JavaScript async patterns |
| 177 | +- RESTful API integration |
| 178 | +- Responsive CSS Grid layouts |
| 179 | +- DOM manipulation techniques |
| 180 | +- Error handling strategies |
| 181 | +- UX/UI best practices |
| 182 | + |
| 183 | +--- |
| 184 | + |
| 185 | +**Happy coding!** 🎉 |
0 commit comments