From d0e4ce61cc8d62a77217afffa36ecf976b4f766c Mon Sep 17 00:00:00 2001 From: shudhodhan1089 Date: Tue, 28 Oct 2025 20:01:41 +0530 Subject: [PATCH 1/2] New Prject Quick Image finder --- .DS_Store | Bin 0 -> 10244 bytes public/.DS_Store | Bin 0 -> 18436 bytes public/Day-216_Quick_image_finder/.DS_Store | Bin 0 -> 6148 bytes .../exported-assets/README.md | 189 ++++++++++ .../exported-assets/index.html | 64 ++++ .../exported-assets/script.js | 183 ++++++++++ .../exported-assets/script.py | 72 ++++ .../exported-assets/script_1.py | 335 ++++++++++++++++++ .../exported-assets/script_2.py | 191 ++++++++++ .../exported-assets/script_3.py | 216 +++++++++++ .../exported-assets/style.css | 327 +++++++++++++++++ 11 files changed, 1577 insertions(+) create mode 100644 .DS_Store create mode 100644 public/.DS_Store create mode 100644 public/Day-216_Quick_image_finder/.DS_Store create mode 100644 public/Day-216_Quick_image_finder/exported-assets/README.md create mode 100644 public/Day-216_Quick_image_finder/exported-assets/index.html create mode 100644 public/Day-216_Quick_image_finder/exported-assets/script.js create mode 100644 public/Day-216_Quick_image_finder/exported-assets/script.py create mode 100644 public/Day-216_Quick_image_finder/exported-assets/script_1.py create mode 100644 public/Day-216_Quick_image_finder/exported-assets/script_2.py create mode 100644 public/Day-216_Quick_image_finder/exported-assets/script_3.py create mode 100644 public/Day-216_Quick_image_finder/exported-assets/style.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..e050e59c0b41a9fba5a9dfcf08fa8ccf7ff8f23b GIT binary patch literal 10244 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 + + + + + Quick Image Finder + + + +
+
+

🔍 Quick Image Finder

+

Search for high-quality images instantly

+
+ +
+
+ + +
+
+ + + + + + + +
+

Powered by Unsplash API

+

⚠️ Please add your Unsplash API key in script.js to use this app

+
+
+ + + + \ No newline at end of file diff --git a/public/Day-216_Quick_image_finder/exported-assets/script.js b/public/Day-216_Quick_image_finder/exported-assets/script.js new file mode 100644 index 00000000..3de96837 --- /dev/null +++ b/public/Day-216_Quick_image_finder/exported-assets/script.js @@ -0,0 +1,183 @@ +// ⚠️ IMPORTANT: Replace 'YOUR_UNSPLASH_ACCESS_KEY' with your actual Unsplash API key +// Get your free API key from: https://unsplash.com/developers + +const API_KEY = 'ZctjphDp66bzNjCO0WNer58GaAXtUAecVUSwfcD2SBo'; +const API_URL = 'https://api.unsplash.com/search/photos'; + +// DOM Elements +const searchForm = document.getElementById('search-form'); +const searchInput = document.getElementById('search-input'); +const resultsSection = document.getElementById('results-section'); +const resultImage = document.getElementById('result-image'); +const resultText = document.getElementById('result-text'); +const photographerName = document.getElementById('photographer-name'); +const imageLink = document.getElementById('image-link'); +const loading = document.getElementById('loading'); +const errorMessage = document.getElementById('error-message'); +const showMoreBtn = document.getElementById('show-more-btn'); +const prevBtn = document.getElementById('prev-btn'); +const nextBtn = document.getElementById('next-btn'); +const imageCounter = document.getElementById('image-counter'); + +// State management +let currentImages = []; +let currentIndex = 0; +let currentQuery = ''; +let currentPage = 1; + +// Event Listeners +searchForm.addEventListener('submit', handleSearch); +showMoreBtn.addEventListener('click', loadMoreResults); +prevBtn.addEventListener('click', showPreviousImage); +nextBtn.addEventListener('click', showNextImage); + +// Handle search submission +async function handleSearch(e) { + e.preventDefault(); + + const query = searchInput.value.trim(); + + if (!query) { + showError('Please enter a search term'); + return; + } + + // Check if API key is set + if (API_KEY === 'YOUR_UNSPLASH_ACCESS_KEY') { + showError('Please add your Unsplash API key in script.js. Get it from https://unsplash.com/developers'); + return; + } + + currentQuery = query; + currentPage = 1; + currentIndex = 0; + + await fetchImages(query, currentPage); +} + +// Fetch images from Unsplash API +async function fetchImages(query, page = 1) { + try { + hideError(); + showLoading(); + hideResults(); + + const url = `${API_URL}?query=${encodeURIComponent(query)}&page=${page}&per_page=10&client_id=${API_KEY}`; + + const response = await fetch(url); + + if (!response.ok) { + throw new Error(`API Error: ${response.status}`); + } + + const data = await response.json(); + + hideLoading(); + + if (data.results.length === 0) { + showError(`No images found for "${query}". Try a different search term.`); + return; + } + + if (page === 1) { + currentImages = data.results; + } else { + currentImages = [...currentImages, ...data.results]; + } + + displayCurrentImage(); + showResults(); + updateNavigationButtons(); + + } catch (error) { + hideLoading(); + console.error('Error fetching images:', error); + showError('Failed to fetch images. Please check your API key and internet connection.'); + } +} + +// Display the current image +function displayCurrentImage() { + const image = currentImages[currentIndex]; + + if (!image) return; + + resultImage.src = image.urls.regular; + resultImage.alt = image.alt_description || image.description || 'Image'; + photographerName.textContent = `Photo by ${image.user.name}`; + imageLink.href = image.links.html; + resultText.textContent = `Showing results for "${currentQuery}"`; + imageCounter.textContent = `${currentIndex + 1} / ${currentImages.length}`; +} + +// Show previous image +function showPreviousImage() { + if (currentIndex > 0) { + currentIndex--; + displayCurrentImage(); + updateNavigationButtons(); + } +} + +// Show next image +function showNextImage() { + if (currentIndex < currentImages.length - 1) { + currentIndex++; + displayCurrentImage(); + updateNavigationButtons(); + } +} + +// Update navigation buttons state +function updateNavigationButtons() { + prevBtn.disabled = currentIndex === 0; + nextBtn.disabled = currentIndex === currentImages.length - 1; +} + +// Load more results (next page) +async function loadMoreResults() { + currentPage++; + await fetchImages(currentQuery, currentPage); +} + +// UI Helper Functions +function showLoading() { + loading.classList.remove('hidden'); +} + +function hideLoading() { + loading.classList.add('hidden'); +} + +function showResults() { + resultsSection.classList.remove('hidden'); +} + +function hideResults() { + resultsSection.classList.add('hidden'); +} + +function showError(message) { + errorMessage.textContent = message; + errorMessage.classList.remove('hidden'); + + // Auto-hide error after 5 seconds + setTimeout(() => { + hideError(); + }, 5000); +} + +function hideError() { + errorMessage.classList.add('hidden'); +} + +// Keyboard navigation +document.addEventListener('keydown', (e) => { + if (currentImages.length === 0) return; + + if (e.key === 'ArrowLeft') { + showPreviousImage(); + } else if (e.key === 'ArrowRight') { + showNextImage(); + } +}); \ No newline at end of file diff --git a/public/Day-216_Quick_image_finder/exported-assets/script.py b/public/Day-216_Quick_image_finder/exported-assets/script.py new file mode 100644 index 00000000..69b7ebbc --- /dev/null +++ b/public/Day-216_Quick_image_finder/exported-assets/script.py @@ -0,0 +1,72 @@ + +# Create the HTML file for the Quick Image Finder project +html_content = """ + + + + + Quick Image Finder + + + +
+
+

🔍 Quick Image Finder

+

Search for high-quality images instantly

+
+ +
+
+ + +
+
+ + + + + + + +
+

Powered by Unsplash API

+

⚠️ Please add your Unsplash API key in script.js to use this app

+
+
+ + + +""" + +# Save HTML file +with open('index.html', 'w', encoding='utf-8') as f: + f.write(html_content) + +print("✓ index.html created successfully") diff --git a/public/Day-216_Quick_image_finder/exported-assets/script_1.py b/public/Day-216_Quick_image_finder/exported-assets/script_1.py new file mode 100644 index 00000000..5bde3795 --- /dev/null +++ b/public/Day-216_Quick_image_finder/exported-assets/script_1.py @@ -0,0 +1,335 @@ + +# Create the CSS file for styling +css_content = """* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + min-height: 100vh; + padding: 20px; +} + +.container { + max-width: 900px; + margin: 0 auto; +} + +header { + text-align: center; + color: white; + margin-bottom: 40px; + animation: fadeInDown 0.8s ease; +} + +header h1 { + font-size: 3rem; + margin-bottom: 10px; + text-shadow: 2px 2px 4px rgba(0,0,0,0.3); +} + +.subtitle { + font-size: 1.2rem; + opacity: 0.9; +} + +.search-section { + background: white; + padding: 30px; + border-radius: 15px; + box-shadow: 0 10px 30px rgba(0,0,0,0.3); + margin-bottom: 30px; + animation: fadeInUp 0.8s ease; +} + +#search-form { + display: flex; + gap: 10px; +} + +#search-input { + flex: 1; + padding: 15px 20px; + font-size: 1rem; + border: 2px solid #e0e0e0; + border-radius: 10px; + transition: all 0.3s ease; +} + +#search-input:focus { + outline: none; + border-color: #667eea; + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); +} + +#search-btn { + padding: 15px 40px; + font-size: 1rem; + font-weight: bold; + color: white; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border: none; + border-radius: 10px; + cursor: pointer; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +#search-btn:hover { + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); +} + +#search-btn:active { + transform: translateY(0); +} + +.results-section { + background: white; + padding: 30px; + border-radius: 15px; + box-shadow: 0 10px 30px rgba(0,0,0,0.3); + animation: fadeInUp 0.8s ease; +} + +.result-info { + margin-bottom: 20px; +} + +#result-text { + font-size: 1.1rem; + color: #333; + margin-bottom: 15px; + font-weight: 500; +} + +.navigation-buttons { + display: flex; + align-items: center; + justify-content: center; + gap: 20px; + margin-top: 15px; +} + +.nav-btn { + padding: 10px 20px; + font-size: 0.9rem; + font-weight: bold; + color: white; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border: none; + border-radius: 8px; + cursor: pointer; + transition: all 0.3s ease; +} + +.nav-btn:hover:not(:disabled) { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); +} + +.nav-btn:disabled { + background: #ccc; + cursor: not-allowed; + opacity: 0.6; +} + +#image-counter { + font-weight: bold; + color: #667eea; + font-size: 1rem; +} + +.image-container { + margin: 20px 0; + text-align: center; +} + +#result-image { + width: 100%; + max-height: 500px; + object-fit: cover; + border-radius: 10px; + box-shadow: 0 5px 20px rgba(0,0,0,0.2); + transition: transform 0.3s ease; +} + +#result-image:hover { + transform: scale(1.02); +} + +.image-details { + margin-top: 15px; + padding: 15px; + background: #f8f9fa; + border-radius: 8px; +} + +#photographer-name { + font-size: 1rem; + color: #555; + margin-bottom: 10px; +} + +#image-link { + display: inline-block; + padding: 8px 20px; + color: white; + background: #667eea; + text-decoration: none; + border-radius: 6px; + transition: background 0.3s ease; +} + +#image-link:hover { + background: #764ba2; +} + +#show-more-btn { + width: 100%; + padding: 15px; + font-size: 1rem; + font-weight: bold; + color: white; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border: none; + border-radius: 10px; + cursor: pointer; + margin-top: 20px; + transition: all 0.3s ease; +} + +#show-more-btn:hover { + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); +} + +.loading { + text-align: center; + background: white; + padding: 40px; + border-radius: 15px; + box-shadow: 0 10px 30px rgba(0,0,0,0.3); +} + +.spinner { + border: 4px solid #f3f3f3; + border-top: 4px solid #667eea; + border-radius: 50%; + width: 50px; + height: 50px; + animation: spin 1s linear infinite; + margin: 0 auto 20px; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.loading p { + color: #667eea; + font-size: 1.1rem; + font-weight: 500; +} + +.error-message { + background: #ff4444; + color: white; + padding: 20px; + border-radius: 10px; + text-align: center; + font-size: 1rem; + box-shadow: 0 5px 15px rgba(255, 68, 68, 0.3); +} + +.hidden { + display: none; +} + +footer { + text-align: center; + color: white; + margin-top: 40px; + padding: 20px; +} + +footer p { + margin: 5px 0; + opacity: 0.9; +} + +footer a { + color: white; + text-decoration: underline; +} + +.api-note { + font-size: 0.9rem; + background: rgba(255, 255, 255, 0.2); + padding: 10px; + border-radius: 8px; + margin-top: 10px; +} + +@keyframes fadeInDown { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Responsive Design */ +@media (max-width: 768px) { + header h1 { + font-size: 2rem; + } + + .subtitle { + font-size: 1rem; + } + + #search-form { + flex-direction: column; + } + + .search-section { + padding: 20px; + } + + .results-section { + padding: 20px; + } + + .navigation-buttons { + flex-direction: column; + gap: 10px; + } + + .nav-btn { + width: 100%; + } +}""" + +# Save CSS file +with open('style.css', 'w', encoding='utf-8') as f: + f.write(css_content) + +print("✓ style.css created successfully") diff --git a/public/Day-216_Quick_image_finder/exported-assets/script_2.py b/public/Day-216_Quick_image_finder/exported-assets/script_2.py new file mode 100644 index 00000000..9a552d4b --- /dev/null +++ b/public/Day-216_Quick_image_finder/exported-assets/script_2.py @@ -0,0 +1,191 @@ + +# Create the JavaScript file with Unsplash API integration +js_content = """// ⚠️ IMPORTANT: Replace 'YOUR_UNSPLASH_ACCESS_KEY' with your actual Unsplash API key +// Get your free API key from: https://unsplash.com/developers + +const API_KEY = 'YOUR_UNSPLASH_ACCESS_KEY'; +const API_URL = 'https://api.unsplash.com/search/photos'; + +// DOM Elements +const searchForm = document.getElementById('search-form'); +const searchInput = document.getElementById('search-input'); +const resultsSection = document.getElementById('results-section'); +const resultImage = document.getElementById('result-image'); +const resultText = document.getElementById('result-text'); +const photographerName = document.getElementById('photographer-name'); +const imageLink = document.getElementById('image-link'); +const loading = document.getElementById('loading'); +const errorMessage = document.getElementById('error-message'); +const showMoreBtn = document.getElementById('show-more-btn'); +const prevBtn = document.getElementById('prev-btn'); +const nextBtn = document.getElementById('next-btn'); +const imageCounter = document.getElementById('image-counter'); + +// State management +let currentImages = []; +let currentIndex = 0; +let currentQuery = ''; +let currentPage = 1; + +// Event Listeners +searchForm.addEventListener('submit', handleSearch); +showMoreBtn.addEventListener('click', loadMoreResults); +prevBtn.addEventListener('click', showPreviousImage); +nextBtn.addEventListener('click', showNextImage); + +// Handle search submission +async function handleSearch(e) { + e.preventDefault(); + + const query = searchInput.value.trim(); + + if (!query) { + showError('Please enter a search term'); + return; + } + + // Check if API key is set + if (API_KEY === 'YOUR_UNSPLASH_ACCESS_KEY') { + showError('Please add your Unsplash API key in script.js. Get it from https://unsplash.com/developers'); + return; + } + + currentQuery = query; + currentPage = 1; + currentIndex = 0; + + await fetchImages(query, currentPage); +} + +// Fetch images from Unsplash API +async function fetchImages(query, page = 1) { + try { + hideError(); + showLoading(); + hideResults(); + + const url = `${API_URL}?query=${encodeURIComponent(query)}&page=${page}&per_page=10&client_id=${API_KEY}`; + + const response = await fetch(url); + + if (!response.ok) { + throw new Error(`API Error: ${response.status}`); + } + + const data = await response.json(); + + hideLoading(); + + if (data.results.length === 0) { + showError(`No images found for "${query}". Try a different search term.`); + return; + } + + if (page === 1) { + currentImages = data.results; + } else { + currentImages = [...currentImages, ...data.results]; + } + + displayCurrentImage(); + showResults(); + updateNavigationButtons(); + + } catch (error) { + hideLoading(); + console.error('Error fetching images:', error); + showError('Failed to fetch images. Please check your API key and internet connection.'); + } +} + +// Display the current image +function displayCurrentImage() { + const image = currentImages[currentIndex]; + + if (!image) return; + + resultImage.src = image.urls.regular; + resultImage.alt = image.alt_description || image.description || 'Image'; + photographerName.textContent = `Photo by ${image.user.name}`; + imageLink.href = image.links.html; + resultText.textContent = `Showing results for "${currentQuery}"`; + imageCounter.textContent = `${currentIndex + 1} / ${currentImages.length}`; +} + +// Show previous image +function showPreviousImage() { + if (currentIndex > 0) { + currentIndex--; + displayCurrentImage(); + updateNavigationButtons(); + } +} + +// Show next image +function showNextImage() { + if (currentIndex < currentImages.length - 1) { + currentIndex++; + displayCurrentImage(); + updateNavigationButtons(); + } +} + +// Update navigation buttons state +function updateNavigationButtons() { + prevBtn.disabled = currentIndex === 0; + nextBtn.disabled = currentIndex === currentImages.length - 1; +} + +// Load more results (next page) +async function loadMoreResults() { + currentPage++; + await fetchImages(currentQuery, currentPage); +} + +// UI Helper Functions +function showLoading() { + loading.classList.remove('hidden'); +} + +function hideLoading() { + loading.classList.add('hidden'); +} + +function showResults() { + resultsSection.classList.remove('hidden'); +} + +function hideResults() { + resultsSection.classList.add('hidden'); +} + +function showError(message) { + errorMessage.textContent = message; + errorMessage.classList.remove('hidden'); + + // Auto-hide error after 5 seconds + setTimeout(() => { + hideError(); + }, 5000); +} + +function hideError() { + errorMessage.classList.add('hidden'); +} + +// Keyboard navigation +document.addEventListener('keydown', (e) => { + if (currentImages.length === 0) return; + + if (e.key === 'ArrowLeft') { + showPreviousImage(); + } else if (e.key === 'ArrowRight') { + showNextImage(); + } +});""" + +# Save JavaScript file +with open('script.js', 'w', encoding='utf-8') as f: + f.write(js_content) + +print("✓ script.js created successfully") diff --git a/public/Day-216_Quick_image_finder/exported-assets/script_3.py b/public/Day-216_Quick_image_finder/exported-assets/script_3.py new file mode 100644 index 00000000..e4ffe906 --- /dev/null +++ b/public/Day-216_Quick_image_finder/exported-assets/script_3.py @@ -0,0 +1,216 @@ + +# Create a comprehensive README file with setup instructions +readme_content = """# Quick Image Finder 🔍 + +A responsive web application that allows users to search for high-quality images using the Unsplash API. Enter a keyword, get instant results, and navigate through multiple images with ease. + +## Features + +✨ **Simple Search Interface** - Clean and intuitive design for easy image searching +🖼️ **High-Quality Images** - Access millions of professional photos from Unsplash +⬅️➡️ **Easy Navigation** - Browse through results with Previous/Next buttons or arrow keys +📱 **Responsive Design** - Works perfectly on desktop, tablet, and mobile devices +🎨 **Modern UI** - Beautiful gradient design with smooth animations +🔄 **Load More** - Fetch additional results without losing your place + +## Technologies Used + +- **HTML5** - Structure and content +- **CSS3** - Styling with gradients, animations, and responsive design +- **JavaScript (ES6+)** - API integration and interactivity +- **Unsplash API** - Free high-quality image database + +## Getting Started + +### Prerequisites + +- A modern web browser (Chrome, Firefox, Safari, Edge) +- Internet connection +- A free Unsplash API key + +### Step 1: Get Your Free Unsplash API Key + +1. Go to [Unsplash Developers](https://unsplash.com/developers) +2. Click **"Register as a Developer"** (or log in if you already have an account) +3. Click **"New Application"** +4. Accept the API guidelines +5. Fill in the application details: + - **Application name**: Quick Image Finder (or any name you prefer) + - **Description**: A web app for searching images +6. Click **"Create application"** +7. Copy your **Access Key** from the application page + +**Note**: The free tier allows 50 requests per hour, which is perfect for this demo project. + +### Step 2: Set Up the Project + +1. Download all three files: + - `index.html` + - `style.css` + - `script.js` + +2. Place all files in the same folder/directory + +3. Open `script.js` in a text editor + +4. Find this line at the top: + ```javascript + const API_KEY = 'YOUR_UNSPLASH_ACCESS_KEY'; + ``` + +5. Replace `'YOUR_UNSPLASH_ACCESS_KEY'` with your actual API key: + ```javascript + const API_KEY = 'your-actual-api-key-here'; + ``` + +6. Save the file + +### Step 3: Run the Application + +1. Double-click on `index.html` to open it in your default browser + - OR right-click → Open with → Choose your browser + +2. Enter a search term (e.g., "mountains", "technology", "nature") + +3. Press the **Search** button or hit Enter + +4. Navigate through results using: + - **Previous/Next buttons** + - **Arrow keys** on your keyboard + - **Load More Results** button for additional images + +## Project Structure + +``` +quick-image-finder/ +│ +├── index.html # Main HTML structure +├── style.css # All styling and animations +├── script.js # JavaScript logic and API integration +└── README.md # This file +``` + +## How It Works + +1. **User Input**: User enters a search keyword in the form +2. **API Request**: The app sends a request to Unsplash API with the search query +3. **Data Processing**: Response data is stored and the first image is displayed +4. **Navigation**: Users can browse through the 10 results per page +5. **Load More**: Clicking "Load More Results" fetches the next page of images + +## API Integration Details + +The app uses Unsplash's Search Photos endpoint: + +``` +https://api.unsplash.com/search/photos?query={searchTerm}&page={pageNumber}&per_page=10 +``` + +**Parameters:** +- `query`: The search keyword +- `page`: Page number for pagination +- `per_page`: Number of results per page (set to 10) +- `client_id`: Your API key for authentication + +## Customization Ideas + +Want to enhance this project? Here are some ideas: + +- Add filter options (orientation, color, etc.) +- Implement download functionality +- Add image favorites/bookmarking +- Create image gallery view +- Add dark mode toggle +- Implement infinite scroll +- Show more image metadata + +## Troubleshooting + +**Problem**: "Please add your Unsplash API key" error +- **Solution**: Make sure you've replaced `YOUR_UNSPLASH_ACCESS_KEY` in `script.js` with your actual key + +**Problem**: "Failed to fetch images" error +- **Solution**: Check your internet connection and verify your API key is correct + +**Problem**: No images found +- **Solution**: Try a different search term or more general keywords + +**Problem**: Images not loading +- **Solution**: Check browser console for errors (F12) and ensure all files are in the same directory + +## API Rate Limits + +- **Free tier**: 50 requests per hour +- **Recommended**: Apply for production access if you need higher limits +- The app handles errors gracefully if you exceed rate limits + +## Contributing to Open Source + +This project is perfect for: +- Learning API integration +- Practicing JavaScript async/await +- Understanding DOM manipulation +- Building portfolio projects + +Feel free to: +- Fork this project +- Add new features +- Fix bugs +- Improve the UI/UX +- Add documentation + +## License + +This project is open source and available for educational purposes. + +**Important**: When using Unsplash images, you must: +- Give credit to photographers +- Follow Unsplash's API guidelines +- Not abuse the API + +## Resources + +- [Unsplash API Documentation](https://unsplash.com/documentation) +- [Unsplash API Guidelines](https://help.unsplash.com/en/articles/2511245-unsplash-api-guidelines) +- [JavaScript Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) + +## Author + +Created as a learning project for web development students. + +## Acknowledgments + +- **Unsplash** for providing free API access +- **Unsplash photographers** for amazing images +- Web development community for tutorials and support + +--- + +**Happy coding! 🚀** + +If you have any questions or run into issues, check the browser console (F12) for detailed error messages. +""" + +# Save README file +with open('README.md', 'w', encoding='utf-8') as f: + f.write(readme_content) + +print("✓ README.md created successfully") +print("\n" + "="*60) +print("✅ ALL FILES CREATED SUCCESSFULLY!") +print("="*60) +print("\nFiles created:") +print(" 1. index.html - Main HTML file") +print(" 2. style.css - Styling and animations") +print(" 3. script.js - JavaScript logic and API integration") +print(" 4. README.md - Complete documentation") +print("\n" + "="*60) +print("NEXT STEPS:") +print("="*60) +print("1. Get your free Unsplash API key from:") +print(" https://unsplash.com/developers") +print("\n2. Open script.js and replace 'YOUR_UNSPLASH_ACCESS_KEY'") +print(" with your actual API key") +print("\n3. Open index.html in your browser") +print("\n4. Start searching for images!") +print("="*60) diff --git a/public/Day-216_Quick_image_finder/exported-assets/style.css b/public/Day-216_Quick_image_finder/exported-assets/style.css new file mode 100644 index 00000000..8c0f38c2 --- /dev/null +++ b/public/Day-216_Quick_image_finder/exported-assets/style.css @@ -0,0 +1,327 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + min-height: 100vh; + padding: 20px; +} + +.container { + max-width: 900px; + margin: 0 auto; +} + +header { + text-align: center; + color: white; + margin-bottom: 40px; + animation: fadeInDown 0.8s ease; +} + +header h1 { + font-size: 3rem; + margin-bottom: 10px; + text-shadow: 2px 2px 4px rgba(0,0,0,0.3); +} + +.subtitle { + font-size: 1.2rem; + opacity: 0.9; +} + +.search-section { + background: white; + padding: 30px; + border-radius: 15px; + box-shadow: 0 10px 30px rgba(0,0,0,0.3); + margin-bottom: 30px; + animation: fadeInUp 0.8s ease; +} + +#search-form { + display: flex; + gap: 10px; +} + +#search-input { + flex: 1; + padding: 15px 20px; + font-size: 1rem; + border: 2px solid #e0e0e0; + border-radius: 10px; + transition: all 0.3s ease; +} + +#search-input:focus { + outline: none; + border-color: #667eea; + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); +} + +#search-btn { + padding: 15px 40px; + font-size: 1rem; + font-weight: bold; + color: white; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border: none; + border-radius: 10px; + cursor: pointer; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +#search-btn:hover { + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); +} + +#search-btn:active { + transform: translateY(0); +} + +.results-section { + background: white; + padding: 30px; + border-radius: 15px; + box-shadow: 0 10px 30px rgba(0,0,0,0.3); + animation: fadeInUp 0.8s ease; +} + +.result-info { + margin-bottom: 20px; +} + +#result-text { + font-size: 1.1rem; + color: #333; + margin-bottom: 15px; + font-weight: 500; +} + +.navigation-buttons { + display: flex; + align-items: center; + justify-content: center; + gap: 20px; + margin-top: 15px; +} + +.nav-btn { + padding: 10px 20px; + font-size: 0.9rem; + font-weight: bold; + color: white; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border: none; + border-radius: 8px; + cursor: pointer; + transition: all 0.3s ease; +} + +.nav-btn:hover:not(:disabled) { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); +} + +.nav-btn:disabled { + background: #ccc; + cursor: not-allowed; + opacity: 0.6; +} + +#image-counter { + font-weight: bold; + color: #667eea; + font-size: 1rem; +} + +.image-container { + margin: 20px 0; + text-align: center; +} + +#result-image { + width: 100%; + max-height: 500px; + object-fit: cover; + border-radius: 10px; + box-shadow: 0 5px 20px rgba(0,0,0,0.2); + transition: transform 0.3s ease; +} + +#result-image:hover { + transform: scale(1.02); +} + +.image-details { + margin-top: 15px; + padding: 15px; + background: #f8f9fa; + border-radius: 8px; +} + +#photographer-name { + font-size: 1rem; + color: #555; + margin-bottom: 10px; +} + +#image-link { + display: inline-block; + padding: 8px 20px; + color: white; + background: #667eea; + text-decoration: none; + border-radius: 6px; + transition: background 0.3s ease; +} + +#image-link:hover { + background: #764ba2; +} + +#show-more-btn { + width: 100%; + padding: 15px; + font-size: 1rem; + font-weight: bold; + color: white; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border: none; + border-radius: 10px; + cursor: pointer; + margin-top: 20px; + transition: all 0.3s ease; +} + +#show-more-btn:hover { + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); +} + +.loading { + text-align: center; + background: white; + padding: 40px; + border-radius: 15px; + box-shadow: 0 10px 30px rgba(0,0,0,0.3); +} + +.spinner { + border: 4px solid #f3f3f3; + border-top: 4px solid #667eea; + border-radius: 50%; + width: 50px; + height: 50px; + animation: spin 1s linear infinite; + margin: 0 auto 20px; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.loading p { + color: #667eea; + font-size: 1.1rem; + font-weight: 500; +} + +.error-message { + background: #ff4444; + color: white; + padding: 20px; + border-radius: 10px; + text-align: center; + font-size: 1rem; + box-shadow: 0 5px 15px rgba(255, 68, 68, 0.3); +} + +.hidden { + display: none; +} + +footer { + text-align: center; + color: white; + margin-top: 40px; + padding: 20px; +} + +footer p { + margin: 5px 0; + opacity: 0.9; +} + +footer a { + color: white; + text-decoration: underline; +} + +.api-note { + font-size: 0.9rem; + background: rgba(255, 255, 255, 0.2); + padding: 10px; + border-radius: 8px; + margin-top: 10px; +} + +@keyframes fadeInDown { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Responsive Design */ +@media (max-width: 768px) { + header h1 { + font-size: 2rem; + } + + .subtitle { + font-size: 1rem; + } + + #search-form { + flex-direction: column; + } + + .search-section { + padding: 20px; + } + + .results-section { + padding: 20px; + } + + .navigation-buttons { + flex-direction: column; + gap: 10px; + } + + .nav-btn { + width: 100%; + } +} \ No newline at end of file From de9747205c663bfb3570f1c431e462379e053161 Mon Sep 17 00:00:00 2001 From: shudhodhan1089 Date: Tue, 28 Oct 2025 20:18:02 +0530 Subject: [PATCH 2/2] some privacy issues Updated Unsplash API key placeholder for privacy. --- public/Day-216_Quick_image_finder/exported-assets/script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/Day-216_Quick_image_finder/exported-assets/script.js b/public/Day-216_Quick_image_finder/exported-assets/script.js index 3de96837..21df34b4 100644 --- a/public/Day-216_Quick_image_finder/exported-assets/script.js +++ b/public/Day-216_Quick_image_finder/exported-assets/script.js @@ -1,7 +1,7 @@ // ⚠️ IMPORTANT: Replace 'YOUR_UNSPLASH_ACCESS_KEY' with your actual Unsplash API key // Get your free API key from: https://unsplash.com/developers -const API_KEY = 'ZctjphDp66bzNjCO0WNer58GaAXtUAecVUSwfcD2SBo'; +const API_KEY = 'Paste Your api key here of unsplash';//Due to privacy issue you have to use your own images const API_URL = 'https://api.unsplash.com/search/photos'; // DOM Elements @@ -180,4 +180,4 @@ document.addEventListener('keydown', (e) => { } else if (e.key === 'ArrowRight') { showNextImage(); } -}); \ No newline at end of file +});