फ़्लिकर स्पेल: इमेज लेटर और नंबर जनरेटर

38 gsdffsfdsdsf

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

10 December 2025

रीबर्थ, अपग्रेड और जावास्क्रिप्ट के साथ क्लिकर गेम HTML

12 December 2025

टेलविंड सीएसएस और जीएसएपी का उपयोग करके बनाई गई सिनेमाई पोर्टफोलियो वेबसाइट

10 December 2025

परफेक्ट सर्कल गेम: ड्रा और स्कोर एचटीएमएल कैनवास

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spell with Flickr Generator</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 50px;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            text-align: center;
            max-width: 800px;
            width: 100%;
        }
        h1 { color: #ff0084; }
        p { color: #0063dc; font-weight: bold; }
        input {
            padding: 12px;
            width: 70%;
            border: 2px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            outline: none;
        }
        input:focus { border-color: #0063dc; }
        button {
            padding: 12px 25px;
            background-color: #ff0084;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.3s;
        }
        button:hover { background-color: #d4006f; }
        #output {
            margin-top: 30px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }
        .flickr-letter {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            background-color: #eee;
        }
        .space { width: 40px; }
        .error { color: red; margin-top: 10px; font-size: 0.9em; }
    </style>
</head>
<body>

<div class="container">
    <h1>Spell with Flickr</h1>
    <p>One Letter & One Digit Group Generator</p>
    <input type="text" id="userInput" placeholder="Enter letters or numbers..." maxlength="20">
    <button onclick="generateSpell()">Spell It!</button>
    <div id="error-msg" class="error"></div>
    <div id="output"></div>
</div>

async function generateSpell() {
        const text = document.getElementById('userInput').value.toLowerCase();
        const output = document.getElementById('output');
        const errorMsg = document.getElementById('error-msg');
        
        output.innerHTML = 'Loading...';
        errorMsg.innerText = '';

if (!text) {
            output.innerHTML = '';
            return;
        }

if (API_KEY === 'YOUR_FLICKR_API_KEY_HERE') {
            errorMsg.innerText = 'Please insert a valid Flickr API Key in the code.';
            output.innerHTML = '';
            return;
        }

const chars = text.split('');
        const results = [];

try {
            for (let char of chars) {
                if (char === ' ') {
                    results.push('<div class="space"></div>');
                    continue;
                }

async function fetchFlickrPhoto(char, groupId) {
        // Search for photos in the specific group with the character as a tag
        const url = `https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=${API_KEY}&group_id=${groupId}&tags=${char}&per_page=10&format=json&nojsoncallback=1&sort=interestingness-desc`;
        
        const response = await fetch(url);
        const data = await response.json();

if (data.photos && data.photos.photo.length > 0) {
            // Pick a random photo from the top results
            const randomIndex = Math.floor(Math.random() * Math.min(data.photos.photo.length, 5));
            const p = data.photos.photo[randomIndex];
            // Construct Flickr Image URL: https://live.staticflickr.com/{server-id}/{id}_{secret}_{size-suffix}.jpg
            return `https://live.staticflickr.com/${p.server}/${p.id}_${p.secret}_q.jpg`;
        }
        return null;
    }
</script>

</body>
</html>

फ़्लिकर स्पेल: इमेज लेटर और नंबर जनरेटर

अनुशंसित

रीबर्थ, अपग्रेड और जावास्क्रिप्ट के साथ क्लिकर गेम HTML

टेलविंड सीएसएस और जीएसएपी का उपयोग करके बनाई गई सिनेमाई पोर्टफोलियो वेबसाइट

परफेक्ट सर्कल गेम: ड्रा और स्कोर एचटीएमएल कैनवास

HTML

CSS

JS

अनुशंसित

रीबर्थ, अपग्रेड और जावास्क्रिप्ट के साथ क्लिकर गेम HTML

टेलविंड सीएसएस और जीएसएपी का उपयोग करके बनाई गई सिनेमाई पोर्टफोलियो वेबसाइट

परफेक्ट सर्कल गेम: ड्रा और स्कोर एचटीएमएल कैनवास

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS