📷 Random Images Finder – Simple Yet Fun!

Looking for a small project to improve your web development skills? The Random Images Finder is the perfect choice! It’s lightweight, engaging, and built using only HTML, CSS, and JavaScript.

💡 Project Idea

The concept was simple: click a button and load a new image from the internet, every time. Instead of using a database or user input, we utilized the public image API from Picsum Photos to generate completely random images.

🛠️ Tools Used

• HTML for page structure
• CSS for styling and responsiveness
• JavaScript for interactivity and image fetching

🧠 Key Learning

• DOM manipulation using JavaScript
• Fetching images using dynamic URLs
• Making layouts responsive for all screen sizes

🔧 Code Example

Here's the simple JavaScript function that loads a new image each time the button is clicked:

function loadImage() {
  const image = document.getElementById("random-image");
  image.src = `https://picsum.photos/400?random=${Math.floor(Math.random() * 1000)}`;
}

📱 Responsive Design

The entire layout was made mobile-first. The image scales automatically, and the cards stack vertically with proper padding on smaller devices. We used media queries to ensure great UX on phones and tablets.

✨ Improvements You Can Try

• Add a loading spinner while image loads
• Allow users to download the image
• Show image author and resolution
• Add filters like grayscale or blur

🚀 Final Thoughts

This project is ideal for beginners. It offers the right balance of fun and functionality. Whether you're learning to use the DOM, experiment with APIs, or practice styling, Random Images Finder is an awesome place to start.

💡 Pro Tip: Host it using GitHub Pages or Netlify and share it with friends!