PokeSnatch

Приложение для поиска и просмотра информации о покемонах с использованием PokeAPI.

Техническое задание

Функциональные требования

1. Поиск покемонов

   • Реализовать поиск покемонов по имени
   • Поиск должен работать в реальном времени с задержкой 300мс
   • Отображать максимум 5 результатов поиска
   • При отсутствии результатов показывать сообщение об ошибке

2. Отображение информации о покемоне

   • Показывать официальное изображение покемона
   • Отображать имя покемона
   • Показывать типы покемона с соответствующими цветами
   • Отображать основные характеристики (HP, Attack, Defense, Speed)
   • Показывать описание покемона из Pokedex

3. Интерфейс

   • Реализовать современный плоский дизайн
   • Добавить анимации при загрузке и взаимодействии
   • Сделать адаптивный дизайн для разных размеров экрана
   • Использовать градиентный фон
   • Добавить индикатор загрузки

Технические требования

1. Архитектура

   • Использовать чистый JavaScript (ES6+)
   • Не использовать фреймворки
   • Применять модульный подход
   • Использовать современные возможности DOM API

2. Производительность

   • Реализовать дебаунс для поиска
   • Использовать ленивую загрузку изображений
   • Оптимизировать запросы к API
   • Кэшировать результаты поиска

3. Безопасность

   • Не использовать innerHTML
   • Валидировать входные данные
   • Обрабатывать ошибки API
   • Использовать безопасные методы манипуляции DOM

4. Стилизация

   • Использовать CSS переменные
   • Применять современные CSS свойства
   • Реализовать плавные анимации
   • Использовать flexbox и grid для верстки

API Endpoints

1. Список покемонов

   • GET https://pokeapi.co/api/v2/pokemon?limit=10000

2. Информация о покемоне

   • GET https://pokeapi.co/api/v2/pokemon/{name}

3. Информация о виде покемона

   • GET https://pokeapi.co/api/v2/pokemon-species/{name}

Состояние приложения

const state = {
  pokemonNames: [], // массив имен всех покемонов
  loading: false    // флаг загрузки
}

Компоненты интерфейса

1. Поиск

   • Поле ввода с плейсхолдером
   • Дебаунс 300мс
   • Очистка результатов при пустом вводе

2. Карточка покемона

   • Изображение
   • Имя
   • Бейджи типов
   • Статистика с визуальными индикаторами
   • Описание

3. Состояния

   • Загрузка
   • Ошибка
   • Результаты поиска

Анимации

1. Фон

   • Плавный градиентный переход

2. Карточки

   • Появление с анимацией fadeIn
   • Эффект при наведении
   • Пульсация изображения

3. Статистика

   • Плавное заполнение индикаторов

Адаптивность

1. Десктоп (>1024px)

   • 4 карточки в ряд
   • Большие изображения

2. Планшет (768px-1024px)

   • 3 карточки в ряд
   • Средние изображения

3. Мобильный (<768px)

   • 1 карточка в ряд
   • Маленькие изображения
   • Оптимизированные отступы