🎯 Цель урока

В этом уроке мы значительно расширим функционал нашего генератора. Добавим систему категорий комплиментов, статистику использования, переключение между состояниями и научимся создавать более сложную структуру данных.

💡 Что вы узнаете:

• Работу с объектами JavaScript
• Систему категорий и переключение
• CSS Grid для статистических карточек
• Динамическое обновление интерфейса
• Управление состоянием приложения

📚 Новые концепции

Объекты JavaScript

Структуры данных для группировки связанных значений: {ключ1: значение1, ключ2: значение2}

querySelector() и querySelectorAll()

Методы для поиска элементов по CSS селекторам, более гибкие чем getElementById

classList.add() и classList.remove()

Методы для добавления и удаления CSS классов для изменения внешнего вида

CSS Grid

Система сетки для создания двумерных макетов: grid-template-columns, gap

Управление состоянием

Отслеживание и изменение текущего состояния приложения (активная категория, счётчики)

🗂️ Структура данных с категориями

Создадим объект с комплиментами, разделёнными по категориям:

// Переменные для состояния приложения
let currentCategory = 'general';
let totalCount = 0;
let categoryCount = 0;
let userName = '';

// Объект с массивами комплиментов по категориям
const compliments = {
  general: [
    "Ты потрясающий человек!",
    "У тебя прекрасная улыбка!",
    "Ты делаешь мир лучше!",
    "Ты очень талантливый!",
    "С тобой всегда весело!",
    "Ты настоящий друг!",
    "У тебя золотое сердце!",
    "Ты источник вдохновения!"
  ],
  smart: [
    "Ты невероятно умный!",
    "Твои идеи просто гениальные!",
    "Ты быстро всё понимаешь!",
    "У тебя отличная память!",
    "Ты настоящий эрудит!",
    "Твоя логика безупречна!",
    "Ты всегда находишь решение!",
    "У тебя аналитический склад ума!"
  ],
  creative: [
    "Ты очень творческий!",
    "У тебя богатое воображение!",
    "Твои идеи уникальны!",
    "Ты настоящий художник души!",
    "У тебя отличный вкус!",
    "Ты мыслишь нестандартно!",
    "Твоё творчество восхищает!",
    "У тебя талант к искусству!"
  ],
  kind: [
    "Ты очень добрый!",
    "У тебя большое сердце!",
    "Ты всегда готов помочь!",
    "Ты заботливый и внимательный!",
    "Твоя доброта согревает!",
    "Ты умеешь дружить!",
    "У тебя щедрая душа!",
    "Ты делаешь добрые дела!"
  ]
};

🔍 Структура объекта:

• Каждый ключ — название категории
• Каждое значение — массив комплиментов
• Легко добавлять новые категории
• Удобно получать комплименты: compliments[currentCategory]

🔄 Функция переключения категорий

Создадим функцию для смены активной категории:

function setCategory(category) {
  // Убираем активный класс у всех кнопок
  const buttons = document.querySelectorAll('.category-button');
  buttons.forEach(btn => btn.classList.remove('active'));
  
  // Добавляем активный класс к выбранной кнопке
  document.getElementById(`btn-${category}`).classList.add('active');
  
  // Устанавливаем новую категорию и сбрасываем счётчик
  currentCategory = category;
  categoryCount = 0;
  updateStats();
}

// Функция для обновления статистики
function updateStats() {
  document.getElementById('totalCount').textContent = totalCount;
  document.getElementById('categoryCount').textContent = categoryCount;
}

Ключевые особенности:

querySelectorAll() — находит все кнопки категорий
forEach() — выполняет действие для каждой кнопки
classList — управляет CSS классами
Сброс счётчика категории при смене

🎲 Обновлённая функция генерации

Модифицируем функцию генерации для работы с категориями:

function generateCompliment() {
  // Получаем массив комплиментов текущей категории
  const categoryCompliments = compliments[currentCategory];
  
  // Выбираем случайный комплимент
  const randomIndex = Math.floor(Math.random() * categoryCompliments.length);
  let compliment = categoryCompliments[randomIndex];
  
  // Если есть имя, добавляем его к комплименту
  if (userName) {
    compliment = `${userName}, ${compliment.toLowerCase()}`;
  }
  
  // Показываем комплимент
  document.getElementById('complimentDisplay').textContent = compliment;
  
  // Обновляем счётчики
  totalCount++;
  categoryCount++;
  updateStats();
}

💡 Логика работы:

1. Получаем комплименты только из активной категории
2. Выбираем случайный элемент из этой категории
3. Увеличиваем общий счётчик и счётчик категории
4. Обновляем отображение статистики

🏗️ HTML структура с категориями

Добавим кнопки категорий и статистику в HTML:

<div style="margin: 20px 0;">
  <p><strong>Выбери категорию комплиментов:</strong></p>
  <button class="category-button active" onclick="setCategory('general')" id="btn-general">
    🌟 Общие
  </button>
  <button class="category-button" onclick="setCategory('smart')" id="btn-smart">
    🧠 Умные
  </button>
  <button class="category-button" onclick="setCategory('creative')" id="btn-creative">
    🎨 Творческие
  </button>
  <button class="category-button" onclick="setCategory('kind')" id="btn-kind">
    💝 Добрые
  </button>
</div>

<!-- Статистика -->
<div class="stats">
  <div class="stat-card">
    <div class="stat-number" id="totalCount">0</div>
    <div class="stat-label">Всего комплиментов</div>
  </div>
  <div class="stat-card">
    <div class="stat-number" id="categoryCount">0</div>
    <div class="stat-label">В этой категории</div>
  </div>
</div>

🎨 CSS для категорий и статистики

Добавим стили для новых элементов:

.category-button {
  background: linear-gradient(135deg, #74b9ff, #0984e3);
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 0.9rem;
  border-radius: 25px;
  cursor: pointer;
  margin: 5px 3px;
  transition: all 0.3s ease;
}

.category-button:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(116, 185, 255, 0.4);
}

.category-button.active {
  background: linear-gradient(135deg, #00b894, #00a085);
}

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 15px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.7);
  padding: 15px;
  border-radius: 15px;
  border: 2px solid #ddd;
  text-align: center;
}

.stat-number {
  font-size: 1.5rem;
  font-weight: bold;
  color: #e91e63;
}

.stat-label {
  font-size: 0.9rem;
  color: #666;
  margin-top: 5px;
}

🎮 Демонстрация работы

Попробуйте нашу расширенную версию с категориями и статистикой:

😊 Генератор комплиментов 😊

Выбери категорию комплиментов:

Выбери категорию и нажми на кнопку! 🌈

0

Всего комплиментов

0

В этой категории

🎓 Что вы изучили

Создание сложных структур данных с объектами
Систему категорий и переключение между ними
Управление состоянием приложения
Работу с CSS классами через JavaScript
CSS Grid для создания сетки статистики
Динамическое обновление интерфейса
Счётчики и статистику использования

🚀 Что дальше?

В финальном уроке мы добавим систему избранного, персонализацию, спецэффекты и создадим полноценное приложение с богатым функционалом!

📊 Категории и статистика