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 Web Artifact Creator

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 Web Artifact Creator
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