generate images

Otokiti Jude answered on November 25, 2023 Popularity 10/10 Helpfulness 1/10

answer generate images

generate images

Comment

-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Search</title>
    <style>
        #gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 16px;
            margin-top: 20px;
        }

        img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Image Search</h1>
    <input type="text" id="searchInput" placeholder="Enter your search term">
    <button onclick="searchImages()">Search</button>

    <div id="gallery"></div>

    <script>
        async function searchImages() {
            const searchInput = document.getElementById('searchInput');
            const searchTerm = searchInput.value.trim();

            if (searchTerm === '') {
                alert('Please enter a search term');
                return;
            }

            const accessKey = 'YOUR_UNSPLASH_ACCESS_KEY'; // Replace with your Unsplash API access key
            const apiUrl = `https://api.unsplash.com/search/photos?query=${searchTerm}&client_id=${accessKey}`;

            try {
                const response = await fetch(apiUrl);
                const data = await response.json();

                displayImages(data.results);
            } catch (error) {
                console.error('Error fetching images:', error);
            }
        }

        function displayImages(images) {
            const gallery = document.getElementById('gallery');
            gallery.innerHTML = ''; // Clear previous images

            images.forEach(image => {
                const imgElement = document.createElement('img');
                imgElement.src = image.urls.regular;
                imgElement.alt = image.alt_description;
                imgElement.addEventListener('click', () => openImage(image.urls.full));

                gallery.appendChild(imgElement);
            });
        }

        function openImage(imageUrl) {
            window.open(imageUrl, '_blank');
        }
    </script>
</body>
</html>

Popularity 10/10 Helpfulness 1/10 Language html

Source: chat.openai.com

Tags: generate html

Link to this answer
Share Copy Link

Contributed on Nov 25 2023

Otokiti Jude

0 Answers Avg Quality 2/10

generate images

Contents

More Related Answers

generate images

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.