html/lab6/task5/script.js - main - Coderdev/web-static-labs

html/lab6/task5/script.js
105 строк3 KB
Coderdev
30 мар 2026, 18:31
30 мар 2026, 18:31020a8dd
"use strict";

const CAT_API_KEY = "live_nRmpY7QLucS6wl77TcbkUPOvtNOjV3mJmDBuhYDKZOLPjqS4tniZ2MwHWwjSnGgL";
const STORAGE_KEY = "lab6FavoriteAnimals";
const loadBtn = document.getElementById("loadBtn");
const favoriteBtn = document.getElementById("favoriteBtn");
const statusEl = document.getElementById("status");
const imageEl = document.getElementById("animalImage");
const favoritesEl = document.getElementById("favorites");

let currentImage = null;

loadBtn.addEventListener("click", loadImage);
favoriteBtn.addEventListener("click", addToFavorites);
window.addEventListener("DOMContentLoaded", renderFavorites);

async function loadImage() {
    favoriteBtn.disabled = true;
    imageEl.hidden = true;
    statusEl.textContent = "Загрузка изображения...";

    const type = document.querySelector('input[name="animal"]:checked').value;

    try {
        let response;
        let data;

        if (type === "dog") {
            response = await fetch("https://dog.ceo/api/breeds/image/random");
            if (!response.ok) {
                throw new Error("HTTP " + response.status);
            }
            data = await response.json();
            currentImage = data.message;
        } else {
            response = await fetch("https://api.thecatapi.com/v1/images/search", {
                headers: {
                    "x-api-key": CAT_API_KEY
                }
            });
            if (!response.ok) {
                throw new Error("HTTP " + response.status);
            }
            data = await response.json();
            currentImage = data[0].url;
        }

        if (!currentImage) {
            throw new Error("Пустой ответ");
        }

        imageEl.src = currentImage;
        imageEl.hidden = false;
        statusEl.textContent = `Загружено: ${type === "dog" ? "собака" : "кошка"}.`;
        favoriteBtn.disabled = false;
    } catch (error) {
        currentImage = null;
        statusEl.textContent = "Не удалось загрузить изображение.";
    }
}

function addToFavorites() {
    if (!currentImage) {
        return;
    }

    const type = document.querySelector('input[name="animal"]:checked').value;
    const favorites = getFavorites();

    favorites.unshift({
        id: Date.now(),
        type: type,
        url: currentImage,
        addedAt: new Date().toISOString()
    });

    localStorage.setItem(STORAGE_KEY, JSON.stringify(favorites));
    renderFavorites();
}

function getFavorites() {
    const raw = localStorage.getItem(STORAGE_KEY);
    return raw ? JSON.parse(raw) : [];
}

function renderFavorites() {
    const favorites = getFavorites();
    favoritesEl.innerHTML = "";

    if (favorites.length === 0) {
        favoritesEl.innerHTML = "<p>Избранное пока пусто.</p>";
        return;
    }

    for (const item of favorites) {
        const card = document.createElement("div");
        card.className = "favorite-card";
        card.innerHTML = `
            <img src="${item.url}" alt="${item.type}">
            <div><strong>${item.type === "dog" ? "Собака" : "Кошка"}</strong></div>
            <div class="favorite-meta">Добавлено: ${new Date(item.addedAt).toLocaleString()}</div>
        `;
        favoritesEl.append(card);
    }
}