Flickr Spell : Générateur de lettres et de chiffres pour images

39 gsdffsfdsdsf

Ouvrir dans l'éditeur Video Publiez votre code

Flickr Spell : Générateur de lettres et de chiffres pour images

Recommandé

27 May 2025

Un code par fragolahack

10 January 2026

Code HTML et CSS de la barre de navigation pour startup IA

16 January 2026

Intégration de jeu Flash avec Ruffle Player

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>

Recommandé

Un code par fragolahack

Code HTML et CSS de la barre de navigation pour startup IA

Intégration de jeu Flash avec Ruffle Player

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS