Image-Search-app #351

Techy-ninja · 2025-10-14T10:57:16Z

Issue #320
Added an Image Search App in example folder.
Here's the preview for this:

image-search.mp4

vercel · 2025-10-14T10:57:22Z

@Techy-ninja is attempting to deploy a commit to the Suman Kunwar's projects Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2025-10-14T17:52:38Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
learn-javascript	Ready	Preview	Comment	Oct 14, 2025 5:53pm

Copilot

Pull Request Overview

Adds a new example Image Search application demonstrating Unsplash API integration, async JS patterns, and a responsive UI.

Introduces HTML/CSS/JS implementation for searching and displaying images with infinite scroll and modal viewing.
Provides a README documenting features, setup, and code concepts.
Includes UI styling and interactive behaviors (loading states, error handling, modal display).

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 9 comments.

File	Description
examples/Image-Search-App/index.html	Base markup for search UI, results grid, loading/error states, and load-more controls.
examples/Image-Search-App/style.css	Styles for layout, grid, buttons, modal, and responsive adjustments.
examples/Image-Search-App/script.js	Core application logic: search, pagination, infinite scroll, modal handling, error states.
examples/Image-Search-App/README.md	Documentation of features, setup, code patterns, and usage.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-14T17:55:38Z

examples/Image-Search-App/script.js

+            this.loadMoreButton.innerHTML = `
+                <div class="load-more-spinner hidden"></div>
+            `;


After an error the button remains disabled (set earlier in showLoadMoreLoadingState) and the timeout replaces its content with only a hidden spinner, removing the actionable label and never re-enabling the button, preventing retry. Re-enable the button and restore the normal 'Load More Images' label (and spinner structure) so users can attempt again.

Suggested change

this.loadMoreButton.innerHTML = `

<div class="load-more-spinner hidden"></div>

`;

this.hideLoadMoreLoadingState();

Copilot · 2025-10-14T17:55:39Z

examples/Image-Search-App/script.js

+        // Animate new images
+        setTimeout(() => {
+            const imageItems = this.imageGrid.querySelectorAll('.image-item');
+            imageItems.forEach((item, index) => {
+                item.style.opacity = '1';
+                item.style.transform = 'translateY(0)';
+                item.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+            });


[nitpick] Per-item inline transition setup duplicates the global animation rules added later (lines 358-361). Consolidate animation/transition logic in CSS to avoid divergence and simplify future adjustments.

Copilot · 2025-10-14T17:55:39Z

examples/Image-Search-App/script.js

+    style.textContent = `
+        .image-item { animation: fadeInUp 0.6s ease forwards; }
+        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+    `;


[nitpick] This global animation definition overlaps with the manual opacity/transform/transition handling elsewhere (e.g., lines 159-166 and initial inline styles in createImageElement). Unifying to a single CSS-driven approach will reduce redundancy.

Copilot · 2025-10-14T17:55:39Z

examples/Image-Search-App/index.html

+                    <input
+                        type="text"
+                        id="searchInput"
+                        placeholder="Search for images... (e.g., nature, technology, animals)"
+                        class="search-input"
+                        autocomplete="off"
+                    >


Input lacks an associated or an aria-label / aria-labelledby attribute; relying solely on placeholder impairs accessibility. Add a visible label or aria-label (e.g., <label for="searchInput">Search images) to improve screen reader support.

Copilot · 2025-10-14T17:55:39Z

examples/Image-Search-App/index.html

+                <button id="loadMoreButton" class="load-more-button">
+                    <div class="load-more-spinner"></div>
+                    Load More Images
+                </button>


The decorative spinner inside the button lacks aria-hidden and the button does not convey loading state via aria-busy or disabled contextually. Mark the spinner <div class="load-more-spinner" aria-hidden="true"> and toggle aria-busy / aria-live or provide status text for assistive technologies.

Suggested change

<button id="loadMoreButton" class="load-more-button">

<div class="load-more-spinner"></div>

Load More Images

</button>

<button id="loadMoreButton" class="load-more-button" aria-busy="false">

<div class="load-more-spinner" aria-hidden="true"></div>

Load More Images

</button>

<span id="loadMoreStatus" class="visually-hidden" aria-live="polite"></span>

Copilot · 2025-10-14T17:55:40Z

examples/Image-Search-App/script.js

+            <div class="modal-overlay">
+                <div class="modal-content">
+                    <button class="modal-close" aria-label="Close">&times;</button>
+                    <img src="${this.escapeHtml(imageUrl)}" alt="${this.escapeHtml(description)}" class="modal-image">
+                    <div class="modal-info">
+                        <p class="modal-description">${this.escapeHtml(description)}</p>
+                        <p class="modal-author">Photo by ${this.escapeHtml(authorName)}</p>
+                    </div>
+                </div>
+            </div>
+        `;
+


Modal creation does not manage focus (no initial focus on close button or content, no focus trap, and original focus is not restored on close). Add focus trapping (keydown Tab handling), set initial focus (e.g., close button), and restore previous focus after removing the modal.

Copilot · 2025-10-14T17:55:40Z

examples/Image-Search-App/README.md

+- **Responsive Design**: Mobile-first approach with media queries
+
+## 📁 Project Structure
+


Filename listed as styles.css but the actual file added is style.css; update the README to match the real filename to avoid confusion.

Copilot · 2025-10-14T17:55:40Z

examples/Image-Search-App/README.md

+}
+```
+
+### Responsive CSS Grid


Documentation shows minmax(280px, 1fr) and gap: 2rem, but the implemented CSS (style.css lines 56-59) uses minmax(240px, 1fr) and gap: var(--gap) (1.5rem). Align the README example with the actual code or note the difference intentionally.

Copilot · 2025-10-14T17:55:40Z

examples/Image-Search-App/README.md

+✅ **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


Claim of 'Proper focus states and ARIA attributes' is not fully reflected in the current implementation (e.g., missing label for search input, no focus trap or restored focus in modal). Update the claim or implement the missing accessibility enhancements.

Suggested change

✅ **Accessibility**: Proper focus states and ARIA attributes

✅ **Accessibility**: Some focus states and ARIA attributes; further enhancements (e.g., search input label, modal focus trap) pending

sumn2u

LGTM!

sumn2u · 2025-10-14T17:54:58Z

examples/Image-Search-App/script.js

+
+class ImageSearchApp {
+    constructor() {
+        this.API_KEY = 'YOUR_UNSPLASH_ACCESS_KEY'; // Unsplash Access Key (replace if necessary)


Nice work on commenting the access key.

Image-Search-app

12128e7

sumn2u requested a review from Copilot October 14, 2025 17:52

vercel bot deployed to Preview October 14, 2025 17:53 View deployment

Copilot AI reviewed Oct 14, 2025

View reviewed changes

sumn2u approved these changes Oct 14, 2025

View reviewed changes

sumn2u merged commit e248116 into sumn2u:main Oct 14, 2025
2 checks passed

sumn2u added the hacktoberfest-accepted label Oct 14, 2025

		- Responsive Design: Mobile-first approach with media queries

		## 📁 Project Structure

	✅ Accessibility: Proper focus states and ARIA attributes
	✅ Accessibility: Some focus states and ARIA attributes; further enhancements (e.g., search input label, modal focus trap) pending

Image-Search-app #351

Image-Search-app #351

Uh oh!

Conversation

Techy-ninja commented Oct 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Oct 14, 2025

Uh oh!

vercel bot commented Oct 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

sumn2u left a comment

Choose a reason for hiding this comment

Uh oh!

sumn2u Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Techy-ninja commented Oct 14, 2025 •

edited

Loading

vercel bot commented Oct 14, 2025 •

edited

Loading