Discourse Meta
Gpt-4o-2024-11-20

Chihuahua Button: Random Flying Images App

maiki

Use that to create a full page app with a button that says “Chihuahua!”, and then those 10 images go randomly flying by.

gpt4o_bot

This is a fun and dynamic request! Here’s the plan:

  1. Button: Create a button labeled “Chihuahua!”.
  2. Fetch Images: Use the Wikimedia API response to extract the image titles.
  3. Random Flying: When the button is clicked, the page will display the images, and they’ll “fly” in random directions for some delightful interactivity.

To implement this:

  1. HTML Structure: A button and a container for images.
  2. CSS Styling: Basic styles for the page and animations for the flying effect.
  3. JavaScript Interaction: Fetch the image URLs and implement the random flying animation.

I’ll start building this web app for you.

View Source

HTML

<button id="chihuahua-button">Chihuahua!</button>
<div id="image-container"></div>

<script type="module">
const apiResponse = {
    "batchcomplete": "",
    "continue": {
        "cmcontinue": "file|32303231204245415220464c41472043454c4542524154494f4e202d20534152414820535449455243482030332e4a5047|108023379",
        "continue": "-||"
    },
    "query": {
        "categorymembers": [
            { "pageid": 425601, "ns": 0, "title": "Chihuahua (dog)" },
            { "pageid": 9710588, "ns": 14, "title": "Category:Chihuahua puppies" },
            { "pageid": 104929681, "ns": 14, "title": "Category:Chihuahua skeletons" },
            { "pageid": 104929511, "ns": 14, "title": "Category:Chihuahuas in art" },
            { "pageid": 32821232, "ns": 14, "title": "Category:Chihuahua heads" },
            { "pageid": 25651063, "ns": 14, "title": "Category:Chihuahua hybrids" },
            { "pageid": 104929256, "ns": 14, "title": "Category:People with Chihuahuas" },
            { "pageid": 64121598, "ns": 6, "title": "File:(1)Chihuahua-1.jpg" },
            { "pageid": 131562832, "ns": 6, "title": "File:(chihuahua) Lana Manas le 19 août 2021 avec oreille levée.jpg" },
            { "pageid": 31564000, "ns": 6, "title": "File:0h, running Bucky.jpg" }
        ]
    }
};

// Function to get image URLs from titles
function getImageUrls(titles) {
    return titles
        .filter(item => item.ns === 6) // Filter only File namespace (images)
        .map(file => `https://commons.wikimedia.org/wiki/Special:FilePath/${encodeURIComponent(file.title.replace('File:', ''))}`);
}

const imageUrls = getImageUrls(apiResponse.query.categorymembers);
const button = document.getElementById('chihuahua-button');
const container = document.getElementById('image-container');

// Button click handler
button.addEventListener('click', () => {
    container.innerHTML = ''; // Clear previous images

    imageUrls.forEach(url => {
        const img = document.createElement('img');
        img.src = url;
        img.alt = 'Chihuahua';
        img.className = 'flying-image';

        // Random animation start position
        img.style.top = `${Math.random() * 90}vh`;
        img.style.left = `${Math.random() * 90}vw`;

        container.appendChild(img);
    });
});
</script>

CSS

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

button {
    padding: 1rem 2rem;
    font-size: 1.5rem;
    background-color: #ff7b7b;
    border: none;
    border-radius: 0.5rem;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #ff4d4d;
}

#image-container {
    position: relative;
    width: 100%;
    height: 100%;
}

img.flying-image {
    position: absolute;
    width: 100px;
    height: auto;
    animation: fly 5s linear infinite;
}

@keyframes fly {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(calc(200px - 100% * var(--random-x, 0)), calc(200px - 100% * var(--random-y, 0))) rotate(360deg);
    }
}

Preview

Show Artifact in new tab
maiki

Use https://commons.wikimedia.org/w/api.php?action=query&format=json&list=categorymembers&cmtitle=Category:Chihuahua_(dog)&cmlimit=100 instead, and just make them “rain” down the screen.

gpt4o_bot
View Changes

Change Description

Updated the app to fetch data dynamically using the new API URL and modified the animation to make images “rain” down.

HTML Changes

<button id="chihuahua-button">Chihuahua!</button>
<div id="image-container"></div>

<script type="module">
async function fetchData() {
    const response = await fetch('https://commons.wikimedia.org/w/api.php?action=query&format=json&list=categorymembers&cmtitle=Category:Chihuahua_(dog)&cmlimit=100&origin=*');
    const data = await response.json();
    return data.query.categorymembers;
}

function getImageUrls(data) {
    return data
        .filter(item => item.ns === 6) // Filter only File namespace (images)
        .map(file => `https://commons.wikimedia.org/wiki/Special:FilePath/${encodeURIComponent(file.title.replace('File:', ''))}`);
}

const button = document.getElementById('chihuahua-button');
const container = document.getElementById('image-container');

button.addEventListener('click', async () => {
    const categoryMembers = await fetchData();
    const imageUrls = getImageUrls(categoryMembers);
    container.innerHTML = ''; // Clear previous images

    imageUrls.forEach((url, index) => {
        const img = document.createElement('img');
        img.src = url;
        img.alt = 'Chihuahua';
        img.className = 'falling-image';
        img.style.left = `${Math.random() * 90}vw`;
        img.style.animationDelay = `${index * 0.3}s`;

        container.appendChild(img);
    });
});
</script>

CSS Changes

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

button {
    padding: 1rem 2rem;
    font-size: 1.5rem;
    background-color: #ff7b7b;
    border: none;
    border-radius: 0.5rem;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
    z-index: 10;
}

button:hover {
    background-color: #ff4d4d;
}

#image-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

img.falling-image {
    position: absolute;
    width: 80px;
    height: auto;
    animation: fall 5s linear infinite;
}

@keyframes fall {
    from {
        transform: translateY(-100px);
    }
    to {
        transform: translateY(110vh);
    }
}

Preview

Show Artifact in new tab