Создайте HTML-страницу с элементами: изображение, имя фотографа, кнопка "лайк" и счетчик лайков. • Используя JavaScript и ваш API-ключ, получите случайное изображение из Unsplash каждый раз

Вопрос пользователя:

Создайте HTML-страницу с элементами: изображение, имя фотографа, кнопка "лайк" и счетчик лайков. • Используя JavaScript и ваш API-ключ, получите случайное изображение из Unsplash каждый раз, когда пользователь загружает страницу. Обратите внимание, что должно подгружаться всегда случайное изображение, для этого есть отдельная ручка (эндпоинт) у API. • Отобразите информацию о фотографе под изображением. • Реализуйте функционал "лайка". Каждый раз, когда пользователь нажимает кнопку "лайк", счетчик должен увеличиваться на единицу. Одну фотографию пользователь может лайкнуть только один раз. Также должна быть возможность снять лайк

Ответ нейросети:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Random Image from Unsplash</title> <style> img { max-width: 100%; height: auto; } </style> </head> <body> <h1>Random Image from Unsplash</h1> <div id="imageContainer"> <img id="randomImage" src="" alt="Random Image"> <p id="photographerName"></p> <button id="likeButton" onclick="likePhoto()">Like</button> <p id="likeCount">0</p> </div>

<script>
    const apiKey = 'YOUR_API_KEY';
    const apiUrl = `https://api.unsplash.com/photos/random?client_id=${apiKey}`;

    let liked = false;
    let likeCount = 0;

    async function getRandomImage() {
        try {
            const response = await fetch(apiUrl);
            const data = await response.json();
            document.getElementById('randomImage').src = data.urls.regular;
            document.getElementById('photographerName').innerText = `Photographer: ${data.user.name}`;
            liked = false;
            likeCount = 0;
            document.getElementById('likeCount').innerText = likeCount;
        } catch (error) {
            console.error('Error fetching random image', error);
        }
    }

    function likePhoto() {
        if (!liked) {
            likeCount++;
            document.getElementById('likeCount').innerText = likeCount;
            liked = true;
        } else {
            likeCount--;
            document.getElementById('likeCount').innerText = likeCount;
            liked = false;
        }
    }

    getRandomImage();
</script>

</body> </html>

Напишите нам, если в вопросе есть ваши персональные данные ([email protected])

Последние вопросы: