Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ClaytonSeager/InifinityScroll/llms.txt

Use this file to discover all available pages before exploring further.

Infinity Scroll is a vanilla JavaScript image gallery powered by the Unsplash API, and contributions of all kinds are welcome and appreciated. Whether you’re fixing a bug, adding a feature, or improving the docs, this guide walks you through everything you need to get a local copy running and your changes submitted as a pull request.

​
Prerequisites

Before you begin, make sure you have the following:
  • Git — to fork, clone, and push branches
  • A modern browser — no build step is required; you can open index.html directly
  • Node.js (optional) — only needed if you want to use npm start with live-server for automatic browser refresh on file save
  • An Unsplash API key — required to fetch photos during development; obtain one free at unsplash.com/developers

​
Fork and Clone

1

Fork the repository on GitHub

Visit https://github.com/ClaytonSeager/InifinityScroll and click Fork to create a copy under your own GitHub account.
2

Clone your fork

git clone https://github.com/YOUR_USERNAME/InifinityScroll.git
3

Enter the project directory

cd InifinityScroll
4

Install the dev dependency (optional)

The only dev dependency is live-server, which watches for file changes and auto-refreshes the browser. Install it and start the server with:
npm install
npm start
If you skip this step, simply open index.html in your browser and refresh manually after each change.
5

Configure your Unsplash API key

Open Infinity.js and replace the value of the KEY constant at the top of the file with your own Unsplash API key:
const KEY = 'YOUR_UNSPLASH_API_KEY';
Never commit a real API key to a public repository. Consider using a local environment variable or a .env file (excluded via .gitignore) if you plan to share your fork publicly.

​
Project Structure

InifinityScroll/
├── index.html       # Gallery markup and element IDs
├── Infinity.js      # All application logic
├── style.css        # All styles and animations
├── assets/
│   ├── loader.svg   # Loading spinner animation
│   └── InfinityScroll.png  # Project logo
└── package.json     # Dev dependency (live-server)
FilePurpose
index.htmlDefines the DOM structure: the image container (#Image__Container), loader (#Loader), image counter (#image-counter), search input (#search-input), search button (#search-button), scroll-to-top button (#scrollTop), and the title column (.Title__Column).
Infinity.jsContains all application logic — API requests via fetch, async/await, DOM manipulation, scroll detection, search handling, and the image-load tracking that gates the next fetch.
style.cssAll visual styles and animations, including the 600 px responsive breakpoint.
assets/loader.svgThe animated spinner shown while images are loading.
assets/InfinityScroll.pngThe project logo displayed in the README.
package.jsonDeclares live-server ^1.2.2 as the sole dependency and exposes it via the npm start script.

​
Making Changes

  1. Create a feature branch from main before making any edits: 
    git checkout -b feature/your-feature-name
  2. Edit the relevant file for the type of change you are making:
    • Infinity.js — application logic, API calls, event handling, DOM manipulation
    • style.css — styles and animations
    • index.html — markup and element IDs
  3. Test in multiple browsers and at multiple viewport widths. Pay particular attention to the 600 px breakpoint defined in style.css, where the layout adapts for smaller screens.
  4. Commit with a descriptive message that explains what changed and why: 
    git add .
git commit -m "feat: add dark mode toggle via CSS class on body"

​
Submitting a Pull Request

1

Push your branch to your fork

git push origin feature/your-feature-name
2

Open a Pull Request on GitHub

Navigate to the original repository at https://github.com/ClaytonSeager/InifinityScroll and click Compare & pull request.
3

Describe your change

In the PR description, explain what the change does and why it improves the project. Link to any relevant issues if applicable.

​
Development Tips

The project uses no build step — edit a file and refresh the browser, or run npm start to have live-server reload automatically. All application state lives in module-level variables declared at the top of Infinity.js: count, KEY, query, ready, imagesLoaded, totalImages, photosArray, and totalLoadedImages. Familiarise yourself with those variables before adding new features.

​
Ideas for Contributions

When query is set, getApiUrl() in Infinity.js switches to the Unsplash search endpoint (/search/photos/) and the response is read as data.results. Currently the app re-requests the same endpoint without tracking which page it is on, so the same results repeat on each scroll. Implementing a currentPage counter that increments on each fetch — and appending &page=${currentPage} to the search URL — would enable true paginated infinite scroll for search results.
Right now each image is wrapped in an <a> tag that opens the Unsplash page (photo.links.html) in a new tab (target: '_blank'). A lightbox overlay could intercept that click and instead display photo.urls.regular inside a modal, keeping users on the page while still honouring the Unsplash link via a caption or button.
The background colour is currently set to whitesmoke in style.css. A dark-mode toggle button could add or remove a CSS class on the <body> element, switching to a dark background and inverting text colours. User preference could be persisted in localStorage.
The Unsplash API guidelines require attribution for displayed photos. Each photo object returned by the API includes photo.user.name (the photographer’s display name) and photo.user.links.html (a link to their Unsplash profile). These could be rendered as a caption overlay on each image card inside displayPhotos() in Infinity.js.
The getPhotos() function currently catches errors and logs them with console.error. A better user experience would render a visible error message in the gallery area — for example, updating imageContainer.innerHTML with a friendly message — so users know a fetch failed rather than seeing a blank page or a spinner that never disappears.

Build docs developers (and LLMs) love

Get started for freeTalk to us