Skip to content

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

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.

Sign up for GitHub

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

Merged
sumn2u merged 3 commits into from
Oct 7, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e9eac61
Fix preview images
ayush-pandey047 Oct 2, 2025
6e66b57
Merge branch 'sumn2u:main' into main
ayush-pandey047 Oct 6, 2025
cff3418
feat: Add Random Photo Viewer with attractive header, fixed image are…
ayush-pandey047 Oct 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions examples/random-photo-viewer/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# 📸 Random Photo Viewer

A simple and fun JavaScript project that displays a random image every time you click a button.

## 🔍 Concepts Demonstrated
- Arrays and random selection in JavaScript
- DOM manipulation and event handling
- CSS transitions for smooth effects

## 🚀 How It Works
1. Images are stored in an array.
2. Each time the button is clicked, a random index is chosen.
3. The image source is updated, and a fade transition is applied.

## 🧩 Bonus Idea
You can replace the local array with an API like Unsplash to load new random images dynamically.
Binary file added examples/random-photo-viewer/images/photo1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/random-photo-viewer/images/photo2.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/random-photo-viewer/images/photo3.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/random-photo-viewer/images/photo4.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/random-photo-viewer/images/photo5.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/random-photo-viewer/images/photo6.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 27 additions & 0 deletions examples/random-photo-viewer/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Random Photo Viewer</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="header">
<h1>Random Photo Viewer</h1>
<button id="btn">Show Random Photo</button>
</div>


Copy link

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

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

[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 uses AI. Check for mistakes.
<div class="image-wrapper">
<div id="loader"></div>
<img id="photo" src="" alt="Random Photo" />
</div>
</div>


Comment on lines +22 to +23
Copy link

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

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

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

Suggested change

Copilot uses AI. Check for mistakes.
<script src="script.js"></script>
</body>
</html>

32 changes: 32 additions & 0 deletions examples/random-photo-viewer/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
const btn = document.getElementById("btn");
const img = document.getElementById("photo");
const loader = document.getElementById("loader");

const photos = [
"images/photo1.jpg",
"images/photo2.jpg",
"images/photo3.jpg",
"images/photo4.jpg",
"images/photo5.jpg"
Comment on lines +5 to +10
Copy link

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

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

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"

Copilot uses AI. Check for mistakes.
];

function showRandomPhoto() {
if (!btn || !img || !loader) return; // safety check

loader.style.display = "block";
img.style.opacity = 0;

const randomIndex = Math.floor(Math.random() * photos.length);
img.src = photos[randomIndex];

img.onload = () => {
loader.style.display = "none";
img.style.opacity = 1;
};
}

// Load first image on page load
window.addEventListener("load", showRandomPhoto);

// Button click
btn.addEventListener("click", showRandomPhoto);
141 changes: 141 additions & 0 deletions examples/random-photo-viewer/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
/* 🌟 Body and General Layout */
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
margin: 0;
background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
font-family: 'Poppins', sans-serif;
}

/* 🌟 Container */
.container {
text-align: center;
width: 720px;
max-width: 90%;
}

/* 🌟 Header: Title + Button side by side */
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

/* 🌟 Attractive Header */
.header h1 {
font-size: 2.2rem;
background: linear-gradient(90deg, #ff8c00, #ff3c00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
letter-spacing: 1px;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease, text-shadow 0.3s ease;
display: inline-block;
cursor: default;
}

.header h1:hover {
transform: scale(1.05) rotate(-2deg);
text-shadow: 3px 3px 10px rgba(255, 140, 0, 0.6);
}

/* 🌟 Header Button */
.header button {
padding: 10px 22px;
font-size: 16px;
background: #ff8c00;
color: #fff;
border: none;
border-radius: 10px;
cursor: pointer;
font-weight: 500;
box-shadow: 0 5px 15px rgba(255, 140, 0, 0.4);
transition: all 0.3s ease;
}

.header button:hover {
background: #ff6600;
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(255, 102, 0, 0.5);
}

/* 🌟 Image Wrapper / Card */
.image-wrapper {
width: 100%;
height: 500px;
border-radius: 20px;
overflow: hidden;
position: relative;
background-color: #e0e0e0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-wrapper:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* 🌟 Image Styling */
.image-wrapper img {
width: 100%;
height: 100%;
object-fit: contain; /* scales large images, keeps small ones visible */
object-position: center;
opacity: 0;
transition: opacity 0.6s ease-in-out;
}

/* 🌟 Loader Spinner */
#loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 6px solid #f3f3f3;
border-top: 6px solid #ff8c00;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
display: none;
}

@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 🌟 Responsive Design */
@media (max-width: 768px) {
.container {
width: 90%;
}

.header {
flex-direction: column;
gap: 10px;
}

.header h1 {
font-size: 1.5rem;
text-align: center;
}

.header button {
font-size: 16px;
padding: 10px 16px;
}

.image-wrapper {
height: 300px;
}
}