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.

index.html defines a minimal, single-page document containing the sticky header bar, search UI, loading overlay, image gallery container, and scroll-to-top button. All interactive behaviour is provided by Infinity.js, which is loaded as the final <script> in <body>. There is no server-side rendering or build step — the file is served directly to the browser.

​
Full Source

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inifinity Scroll</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="Title__Column">
        <div class="counter">
            <span class="counter-icon">🖼</span>
            <span>TOTAL IMAGES: <span id="image-counter">0</span></span>
        </div>
        <h1>INFINITY</h1>
        <h2>scroll</h2>
    </div>
    <div class="search-container">
        <div class="search-bar">
            <input type="text" id="search-input" placeholder="Search images...">
            <button id="search-button">
                <span class="search-icon">🔍</span>
            </button>
        </div>
    </div>

     <div class="Loader" id="Loader">
        <img src="assets/loader.svg" alt="Loading">
     </div>

      <div class="Image__Container" id="Image__Container">
      </div>
    <div class="scroll-top" id="scrollTop">
        <span class="scroll-icon">🔼</span>
        <span class="scroll-text">Back to Top</span>
    </div>
    <script src="Infinity.js"></script>
</body>
</html>

​
Element Reference

​
.Title__Column

The sticky header bar that sits at the top of the viewport. It contains the image counter badge, the <h1>INFINITY</h1> title, and the <h2>scroll</h2> subtitle. JavaScript adds the scrolled class to this element when window.scrollY > 50, triggering a compact, semi-transparent appearance defined in style.css. 
<div class="Title__Column">
    <div class="counter">
        <span class="counter-icon">🖼</span>
        <span>TOTAL IMAGES: <span id="image-counter">0</span></span>
    </div>
    <h1>INFINITY</h1>
    <h2>scroll</h2>
</div>

​
.counter

A pill-shaped badge <div> positioned at the left edge of .Title__Column. It displays the running total of images loaded this session. On desktop it is position: absolute; on mobile (≤ 600 px) it switches to position: static and flows inline with the header content. 
<div class="counter">
    <span class="counter-icon">🖼</span>
    <span>TOTAL IMAGES: <span id="image-counter">0</span></span>
</div>

​
.counter-icon

A <span> inside .counter that holds the picture-frame emoji (🖼). In style.css this element has the bounce keyframe animation applied, causing it to float gently up and down at all times.

​
#image-counter

A <span> nested inside the .counter badge. JavaScript sets its textContent to the running total of all images loaded in the current session via imageCounter.textContent = totalLoadedImages. Its initial value is 0. 
<span>TOTAL IMAGES: <span id="image-counter">0</span></span>

​
.search-container / .search-bar

Two wrapper <div> elements that create the centred pill-shaped search field. .search-container handles page-level centering with flexbox; .search-bar renders the rounded white card that holds the input and button together. 
<div class="search-container">
    <div class="search-bar">
        <input type="text" id="search-input" placeholder="Search images...">
        <button id="search-button">
            <span class="search-icon">🔍</span>
        </button>
    </div>
</div>

​
#search-input

The text <input> where users type their search query. JavaScript reads searchInput.value inside handleSearch() and assigns it to query. A keypress listener on this element calls handleSearch() when the Enter key is pressed.

​
#search-button

The <button> inside .search-bar. A click listener attached in Infinity.js calls handleSearch(). Contains a .search-icon emoji span as its visual label.

​
.search-icon

A <span> inside #search-button that displays the magnifying-glass emoji (🔍) as the button’s visual label. No JavaScript interaction — purely presentational.

​
#Loader

A full-viewport overlay <div> (class Loader, id Loader) that renders a centered animated SVG while a photo batch is being fetched and rendered. Its visibility is controlled entirely by JavaScript via the hidden attribute:
  • loader.hidden = false — shown at the start of each fetch
  • loader.hidden = true — hidden once all images in the current batch have fired their load events
<div class="Loader" id="Loader">
    <img src="assets/loader.svg" alt="Loading">
</div>
The loader SVG is expected at assets/loader.svg relative to index.html. If you relocate or rename the file, update the src attribute accordingly.

​
#Image__Container

The gallery container <div> (class Image__Container, id Image__Container) where all photo elements are injected at runtime. displayPhotos() creates <a>+<img> pairs and appends them to this element. When the user performs a new search, handleSearch() clears it via imageContainer.innerHTML = '' before loading fresh results. 
<div class="Image__Container" id="Image__Container">
</div>

​
#scrollTop

A fixed-position “Back to Top” button (class="scroll-top", id="scrollTop"). It starts invisible (opacity: 0) and gains the visible class — which transitions it into view — when window.scrollY > window.innerHeight. Clicking it calls window.scrollTo({ top: 0, behavior: 'smooth' }). On mobile (≤ 600 px) the button spans the full bottom edge of the screen and reveals the .scroll-text label “Back to Top”. 
<div class="scroll-top" id="scrollTop">
    <span class="scroll-icon">🔼</span>
    <span class="scroll-text">Back to Top</span>
</div>

​
.scroll-icon

A <span> inside #scrollTop that displays the upward-arrow emoji (🔼). Visible at all viewport sizes — no JavaScript interaction.

​
.scroll-text

A <span> inside #scrollTop containing the text “Back to Top”. Set to display: none on desktop and display: inline on mobile (≤ 600 px), so the label only appears on narrow screens where the button spans the full bottom edge.

​
<script src="Infinity.js">

Placed as the last element inside <body>, ensuring every DOM element above it exists before Infinity.js runs its top-level document.getElementById and document.querySelector calls. Moving this tag into <head> without a defer attribute would cause those calls to return null.

​
JavaScript–DOM Bindings

The following table shows every variable in Infinity.js that holds a direct reference to a DOM element, and the selector used to obtain it.
JS VariableSelector / MethodDOM Element
imageContainerdocument.getElementById('Image__Container')#Image__Container
loaderdocument.getElementById('Loader')#Loader
titleColumndocument.querySelector('.Title__Column').Title__Column
imageCounterdocument.getElementById('image-counter')#image-counter
scrollTopBtndocument.getElementById('scrollTop')#scrollTop
searchInputdocument.getElementById('search-input')#search-input
searchButtondocument.getElementById('search-button')#search-button
If you rename any element’s id or class in index.html, you must update the matching selector in Infinity.js as well, or the corresponding JS variable will be null and the gallery will throw a runtime error.

Build docs developers (and LLMs) love

Get started for freeTalk to us