Eventbrite Venue Lookup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eventbrite Venue ID Finder</title>
</head>
<body>
    <h1>Eventbrite Venue ID Finder</h1>
    <label for="event-id">Event ID:</label>
    <input type="text" id="event-id">
    <br><br>
    <label for="api-key">API Key:</label>
    <input type="text" id="api-key">
    <br><br>
    <button id="fetch-venue-id">Fetch Venue ID</button>
    <p id="result"></p>

    <script>
        document.getElementById('fetch-venue-id').addEventListener('click', async () => {
            const eventId = document.getElementById('event-id').value;
            const apiKey = document.getElementById('api-key').value;
            const resultElement = document.getElementById('result');

            if (!eventId || !apiKey) {
                resultElement.textContent = 'Please enter both Event ID and API Key.';
                return;
            }

            const url = `https://www.eventbriteapi.com/v3/events/${eventId}/`;
            try {
                const response = await fetch(url, {
                    method: 'GET',
                    headers: {
                        'Authorization': `Bearer ${apiKey}`
                    }
                });

                if (response.ok) {
                    const eventDetails = await response.json();
                    const venueId = eventDetails.venue_id;
                    resultElement.textContent = `Venue ID: ${venueId}`;
                } else {
                    resultElement.textContent = `Error: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultElement.textContent = `Error: ${error.message}`;
            }
        });
    </script>
</body>
</html>