Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Create an Example Solution for an Image Search App #320 #330

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
suryaprakash0010 wants to merge 4 commits into sumn2u:main
base: main
Choose a base branch
Loading
from suryaprakash0010:Create-Example-Solution-for-an-Image-Search-App

Conversation

@suryaprakash0010
Copy link
Contributor

@suryaprakash0010 suryaprakash0010 commented Oct 5, 2025

✨ Image Search App Example (#320)

Description

Added a complete Image Search App in the examples/ folder demonstrating API integration, async JavaScript, and responsive design.

Features

  • πŸ” Dynamic image search with Unsplash API
  • πŸ“± Responsive grid layout (CSS Grid)
  • πŸ”„ Infinite scroll & loading spinner
  • πŸ–ΌοΈ Full-size image modal
  • βš™οΈ Error handling & accessibility

Files Added

  • index.html β€” Semantic structure
  • styles.css β€” Modern, glassmorphic design
  • script.js β€” Fetch API + async/await logic
  • README.md β€” Setup & usage guide

Concepts

Fetch API β€’ Async/Await β€’ DOM Manipulation β€’ CSS Grid β€’ Responsive UI

Ready for review! πŸš€

Copy link

vercel bot commented Oct 5, 2025

@suryaprakash0010 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.

@sumn2u sumn2u requested a review from Copilot October 5, 2025 23:38
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR creates a complete Image Search App example demonstrating modern web development techniques including API integration, async JavaScript, and responsive design patterns.

Key changes:

  • Built a full-stack client-side application with dynamic image search functionality
  • Implemented modern CSS with glassmorphic design and responsive grid layouts
  • Created comprehensive documentation covering setup, concepts, and customization

Reviewed Changes

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

File Description
examples/Image-Search-App/styles.css Modern responsive CSS with glassmorphic design, CSS Grid layouts, and accessibility features
examples/Image-Search-App/script.js Complete JavaScript application with API integration, async/await patterns, and error handling
examples/Image-Search-App/index.html Semantic HTML structure with modern markup patterns
examples/Image-Search-App/README.md Comprehensive documentation with setup instructions and code explanations

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

Comment on lines 269 to 275
/* Multi-line text truncation using webkit for maximum browser compatibility */
display: -webkit-box;
display: block;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
Copy link

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The display: block declaration on line 271 overrides the display: -webkit-box on line 270, potentially breaking the webkit line clamp functionality. Consider removing line 271 or using a more specific selector for fallback behavior.

Copilot uses AI. Check for mistakes.

imageItem.innerHTML = `
<div class="image-container">
<img src="${thumbnailUrl}" alt="${description}" loading="lazy" onload="this.parentElement.parentElement.style.transition='opacity 0.6s ease, transform 0.6s ease'; this.parentElement.parentElement.style.opacity='1'; this.parentElement.parentElement.style.transform='translateY(0)';">
Copy link

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The inline onload handler contains complex logic that would be better handled through event listeners for improved maintainability and separation of concerns.

Copilot uses AI. Check for mistakes.
Comment on lines 311 to 323
document.body.removeChild(modal);
});

modal.querySelector('.modal-overlay').addEventListener('click', (e) => {
if (e.target === e.currentTarget) {
document.body.removeChild(modal);
}
});

// Close on escape key
const escapeHandler = (e) => {
if (e.key === 'Escape') {
document.body.removeChild(modal);
Copy link

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using removeChild without checking if the element still exists could throw an error if the modal has already been removed. Use modal.remove() or check for element existence before removal.

Suggested change
document.body.removeChild(modal);
});
modal.querySelector('.modal-overlay').addEventListener('click', (e) => {
if (e.target === e.currentTarget) {
document.body.removeChild(modal);
}
});
// Close on escape key
const escapeHandler = (e) => {
if (e.key === 'Escape') {
document.body.removeChild(modal);
modal.remove();
});
modal.querySelector('.modal-overlay').addEventListener('click', (e) => {
if (e.target === e.currentTarget) {
modal.remove();
}
});
// Close on escape key
const escapeHandler = (e) => {
if (e.key === 'Escape') {
modal.remove();

Copilot uses AI. Check for mistakes.
Comment on lines 311 to 323
document.body.removeChild(modal);
});

modal.querySelector('.modal-overlay').addEventListener('click', (e) => {
if (e.target === e.currentTarget) {
document.body.removeChild(modal);
}
});

// Close on escape key
const escapeHandler = (e) => {
if (e.key === 'Escape') {
document.body.removeChild(modal);
Copy link

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using removeChild without checking if the element still exists could throw an error if the modal has already been removed. Use modal.remove() or check for element existence before removal.

Suggested change
document.body.removeChild(modal);
});
modal.querySelector('.modal-overlay').addEventListener('click', (e) => {
if (e.target === e.currentTarget) {
document.body.removeChild(modal);
}
});
// Close on escape key
const escapeHandler = (e) => {
if (e.key === 'Escape') {
document.body.removeChild(modal);
modal.remove();
});
modal.querySelector('.modal-overlay').addEventListener('click', (e) => {
if (e.target === e.currentTarget) {
modal.remove();
}
});
// Close on escape key
const escapeHandler = (e) => {
if (e.key === 'Escape') {
modal.remove();

Copilot uses AI. Check for mistakes.
Comment on lines 311 to 323
document.body.removeChild(modal);
});

modal.querySelector('.modal-overlay').addEventListener('click', (e) => {
if (e.target === e.currentTarget) {
document.body.removeChild(modal);
}
});

// Close on escape key
const escapeHandler = (e) => {
if (e.key === 'Escape') {
document.body.removeChild(modal);
Copy link

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using removeChild without checking if the element still exists could throw an error if the modal has already been removed. Use modal.remove() or check for element existence before removal.

Suggested change
document.body.removeChild(modal);
});
modal.querySelector('.modal-overlay').addEventListener('click', (e) => {
if (e.target === e.currentTarget) {
document.body.removeChild(modal);
}
});
// Close on escape key
const escapeHandler = (e) => {
if (e.key === 'Escape') {
document.body.removeChild(modal);
modal.remove();
});
modal.querySelector('.modal-overlay').addEventListener('click', (e) => {
if (e.target === e.currentTarget) {
modal.remove();
}
});
// Close on escape key
const escapeHandler = (e) => {
if (e.key === 'Escape') {
modal.remove();

Copilot uses AI. Check for mistakes.

hideLoadMoreLoadingState() {
this.loadMoreButton.innerHTML = `
<div class="load-more-spinner" style="display: none;"></div>
Copy link

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Inline styles in dynamically generated HTML should be avoided. Consider using CSS classes to control visibility instead of inline display: none.

Copilot uses AI. Check for mistakes.
this.loadMoreButton.innerHTML = 'Error loading more images. Try again.';
setTimeout(() => {
this.loadMoreButton.innerHTML = `
<div class="load-more-spinner" style="display: none;"></div>
Copy link

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Inline styles in dynamically generated HTML should be avoided. Consider using CSS classes to control visibility instead of inline display: none.

Copilot uses AI. Check for mistakes.
Copy link

vercel bot commented Oct 5, 2025 •
edited
Loading

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

Project Deployment Preview Comments Updated (UTC)
learn-javascript Ready Ready Preview Comment Oct 6, 2025 10:56am

Copy link
Owner

sumn2u commented Oct 5, 2025

@suryaprakash0010 When you have can you look into above issues?

const escapeHandler = (e) => {
if (e.key === 'Escape') {
modal.remove();
Commit suggestion
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it possible to fix this issue?

styleElement.textContent = modalStyles;
document.head.appendChild(styleElement);
}

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this paragraph needs to be commented, right?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sumn2u sumn2u sumn2u left review comments

Copilot code review Copilot Copilot left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /