Flickr Spell: Image Letter & Number Generator

Open In Editor Video Publish Your Code

<!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>

Flickr Spell: Image Letter & Number Generator

Recommended

cardinal numbers

Animated CSS Checkboxes with SVG & JavaScript

Flickr Letter Art Generator (Spell with Photos)

HTML

CSS

JS

Recommended

cardinal numbers

Animated CSS Checkboxes with SVG & JavaScript

Flickr Letter Art Generator (Spell with Photos)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS