Add Random Photo Viewer with attractive header, loader, and responsive design

[ayush-pandey047]

This PR adds a Random Photo Viewer app example:

• Fetches random photos from Unsplash API
• Shows a loader while images load
• Fixed image display area with fade-in
• Attractive gradient header with hover animation
• Responsive design for mobile and desktop

[vercel]

@ayush-pandey047 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]

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

Project	Deployment	Preview	Comments	Updated (UTC)
learn-javascript	Ready	Preview	Comment	Oct 6, 2025 11:44pm

[Copilot]

Pull Request Overview

This PR adds a new Random Photo Viewer example application that displays random photos with an attractive user interface. The app includes a loader animation while images load and features responsive design for both mobile and desktop views.

• Implements a random photo viewer with fade-in animations and loading states
• Creates an attractive gradient header with hover effects and responsive layout
• Includes comprehensive styling with modern CSS features and mobile responsiveness

Reviewed Changes

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

File	Description
examples/random-photo-viewer/index.html	HTML structure with header, button, and image display area
examples/random-photo-viewer/script.js	JavaScript logic for random photo selection and loading states
examples/random-photo-viewer/style.css	Complete CSS styling with gradients, animations, and responsive design
examples/random-photo-viewer/README.md	Documentation explaining the project features and concepts

---

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

[Copilot]

[nitpick] Remove extra blank lines between the closing header div and the image-wrapper div to maintain consistent spacing throughout the HTML.

Suggested change

[Copilot]

[nitpick] Remove extra blank lines before the script tag to maintain consistent spacing throughout the HTML.

Suggested change

[Copilot]

The hardcoded image paths reference files that don't exist in the repository. This will result in broken images and failed loading. Consider using placeholder images or documenting that users need to add these images to an 'images' folder.

Suggested change

	const photos = [
	"images/photo1.jpg",
	"images/photo2.jpg",
	"images/photo3.jpg",
	"images/photo4.jpg",
	"images/photo5.jpg"
	// You can replace these placeholder URLs with your own images by adding them to an 'images' folder
	// and updating the paths below (e.g., "images/photo1.jpg").
	const photos = [
	"https://via.placeholder.com/400x300?text=Photo+1",
	"https://via.placeholder.com/400x300?text=Photo+2",
	"https://via.placeholder.com/400x300?text=Photo+3",
	"https://via.placeholder.com/400x300?text=Photo+4",
	"https://via.placeholder.com/400x300?text=Photo+5"

[sumn2u]

LGTM.

[sumn2u]

Fixes #322