Project 2/20
This is a dynamic image gallery built with HTML, CSS, and JavaScript that uses the Unsplash API to fetch and display random images with infinite scrolling. When the user scrolls near the bottom of the page, more photos are automatically loaded.
⚠️ Important: You must use your own Unsplash API key to make this project work. Visit Unsplash Developers to register and obtain an API key.
- 🔴 Live Demo - N/A (To view the project, clone the repository and follow the 📦 Setup & Installation instructions.)
- 🗂️ GitHub Repository
- ✅ Infinite Scroll to fetch more images on demand
- ✅ Smooth image loading experience
git clone https://github.com/DalaScript/infinite-scroll.git
cd infinite-scrollReplace the apiKey in script.js with your own Unsplash API key:
const apiKey = 'YOUR_UNSPLASH_API_KEY';You can open index.html directly in your browser or use a local development server:
# Example: Using VS Code Live Server or any static file server- HTML5
- CSS3
- Vanilla JavaScript
- Unsplash API
- Handling API response flow with
async/awaitand dynamic batch size - Efficient infinite scroll logic using scroll position and load tracking
- Image load management for smoother UX and controlled rendering
- Clean DOM manipulation with reusable helper functions
🚀 For me, this project was more about practice and gaining additional experience,
rather than learning something entirely new.👨💻 Since I’m not a beginner and already familiar with these technologies,
I approached it with confidence — and still, I truly enjoyed working on it.🎯 Overall, I consider this a very valuable and enjoyable experience.
- Quote Generator | [Project 1/20] → View Repository
- Picture in Picture | [Project 3/20] → View Repository
- Loading Animation Generator – Free animated loaders to enhance UX.
- Google Fonts – Choose beautiful fonts for your UI.
- Unsplash Images – High-quality, free-to-use photography.
- Unsplash API Documentation – Full reference on endpoints, keys, and usage limits.
- W3Schools - ForEach – JavaScript method for clean iteration.
- For Each vs For Loops Article (Updated) – Comparison and performance discussion.
- W3Schools - DOM Events – DOM events and event handling.
- W3Schools - On Load Event – Handle when elements finish loading (important for lazy-load).
🙌 Thanks for checking out my project! More coming soon. Stay tuned 🚀