diff --git a/examples/random-photo-viewer/README.md b/examples/random-photo-viewer/README.md new file mode 100644 index 00000000..14335ec7 --- /dev/null +++ b/examples/random-photo-viewer/README.md @@ -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. diff --git a/examples/random-photo-viewer/images/photo1.jpg b/examples/random-photo-viewer/images/photo1.jpg new file mode 100644 index 00000000..fac48b3c Binary files /dev/null and b/examples/random-photo-viewer/images/photo1.jpg differ diff --git a/examples/random-photo-viewer/images/photo2.jpg b/examples/random-photo-viewer/images/photo2.jpg new file mode 100644 index 00000000..180a86e0 Binary files /dev/null and b/examples/random-photo-viewer/images/photo2.jpg differ diff --git a/examples/random-photo-viewer/images/photo3.jpg b/examples/random-photo-viewer/images/photo3.jpg new file mode 100644 index 00000000..8fcb28c5 Binary files /dev/null and b/examples/random-photo-viewer/images/photo3.jpg differ diff --git a/examples/random-photo-viewer/images/photo4.jpg b/examples/random-photo-viewer/images/photo4.jpg new file mode 100644 index 00000000..4ec6f526 Binary files /dev/null and b/examples/random-photo-viewer/images/photo4.jpg differ diff --git a/examples/random-photo-viewer/images/photo5.jpg b/examples/random-photo-viewer/images/photo5.jpg new file mode 100644 index 00000000..da99145b Binary files /dev/null and b/examples/random-photo-viewer/images/photo5.jpg differ diff --git a/examples/random-photo-viewer/images/photo6.jpg b/examples/random-photo-viewer/images/photo6.jpg new file mode 100644 index 00000000..2dfb701c Binary files /dev/null and b/examples/random-photo-viewer/images/photo6.jpg differ diff --git a/examples/random-photo-viewer/index.html b/examples/random-photo-viewer/index.html new file mode 100644 index 00000000..4b1d5041 --- /dev/null +++ b/examples/random-photo-viewer/index.html @@ -0,0 +1,27 @@ + + + + + + Random Photo Viewer + + + +
+
+

Random Photo Viewer

+ +
+ + +
+
+ Random Photo +
+
+ + + + + + diff --git a/examples/random-photo-viewer/script.js b/examples/random-photo-viewer/script.js new file mode 100644 index 00000000..243c3e57 --- /dev/null +++ b/examples/random-photo-viewer/script.js @@ -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" +]; + +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); diff --git a/examples/random-photo-viewer/style.css b/examples/random-photo-viewer/style.css new file mode 100644 index 00000000..39cb0254 --- /dev/null +++ b/examples/random-photo-viewer/style.css @@ -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; + } +}