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

html/lab6/task5/script.js
77 строк2 KB
Dasha_10
изменения
05 ноя 2025, 10:24
05 ноя 2025, 10:247d88f7e
const loadBtn = document.getElementById('load-btn');
const favBtn = document.getElementById('fav-btn');
const imageContainer = document.getElementById('image-container');
const favoritesList = document.getElementById('favorites-list');
const animalRadios = document.querySelectorAll('input[name="animal"]');
const STORAGE_KEY = 'favoriteAnimals';

let currentImageUrl = null;

function getSelectedAnimal() {
  return [...animalRadios].find(r => r.checked).value;
}

function fetchDogImage() {
  return fetch('https://dog.ceo/api/breeds/image/random')
    .then(res => res.json())
    .then(data => data.message);
}

function fetchCatImage() {
  return fetch('https://api.thecatapi.com/v1/images/search')
    .then(res => res.json())
    .then(data => data[0]?.url);
}

function renderImage(url) {
  imageContainer.innerHTML = `<img src="${url}" alt="Animal image" />`;
}

function loadFavorites() {
  const favorites = JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
  favoritesList.innerHTML = '';

  favorites.forEach(item => {
    const li = document.createElement('li');
    const img = document.createElement('img');
    img.src = item.url;
    img.alt = 'Избраное изображение';

    const date = new Date(item.date);
    const text = document.createElement('span');
    text.textContent = date.toLocaleString();

    li.appendChild(img);
    li.appendChild(text);
    favoritesList.appendChild(li);
  });
}

function addFavorite(url) {
  const favorites = JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
  favorites.push({ url, date: new Date().toISOString() });
  localStorage.setItem(STORAGE_KEY, JSON.stringify(favorites));
  loadFavorites();
}

loadBtn.addEventListener('click', async () => {
  favBtn.disabled = true;
  imageContainer.innerHTML = 'Загрузка...';
  try {
    const animal = getSelectedAnimal();
    currentImageUrl = animal === 'dog' ? await fetchDogImage() : await fetchCatImage();
    renderImage(currentImageUrl);
    favBtn.disabled = false;
  } catch {
    imageContainer.innerHTML = 'Ошибка загрузки изображения';
    currentImageUrl = null;
  }
});

favBtn.addEventListener('click', () => {
  if (!currentImageUrl) return;
  addFavorite(currentImageUrl);
  favBtn.disabled = true;
});

loadFavorites();