document.addEventListener('DOMContentLoaded', () => {
    const searchButton = document.getElementById('search-button');
    const searchQueryInput = document.getElementById('search-query');
    const apiResponseOutput = document.getElementById('api-response');

    searchButton.addEventListener('click', async () => {
        const query = searchQueryInput.value.trim();
        if (!query) {
            apiResponseOutput.textContent = 'Please enter a search query.';
            return;
        }

        apiResponseOutput.textContent = 'Searching...';

        try {
            // Note: For extensive use, you should use an API key.
            // Add &key=YOUR_API_KEY to the URL if you have one.
            const response = await fetch(`https://www.googleapis.com/books/v1/volumes?q=${encodeURIComponent(query)}`);
            if (!response.ok) {
                const errorText = await response.text();
                throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`);
            }
            const data = await response.json();
            apiResponseOutput.textContent = JSON.stringify(data, null, 2);
        } catch (error) {
            console.error('Error fetching from Google Books API:', error);
            apiResponseOutput.textContent = `Error: ${error.message}`;
        }
    });
});