Доопрацювання до першої робочої версії

Архітектура потоку даних у клієнтському застосунку

Коли користувач взаємодіє з інтерактивною сторінкою, інформація проходить чіткий шлях: від фізичного натискання клавіші чи кліку миші до перемалювання пікселів на екрані. Розуміння цього конвеєра дозволяє точно визначати, на якому саме етапі виник дефект.

@startuml
skinparam style plain
skinparam backgroundColor #FFFFFF
skinparam packageBackgroundColor #F8FAFC
skinparam packageBorderColor #1E293B

actor "Користувач" as User #DBEAFE

package "Інтерфейс (DOM)" {
  [Поля форми (Inputs)] as Form #FEF3C7
  [Кнопка дії (Button)] as Btn #FEF3C7
  [Блок результату (Result Box)] as Result #DCFCE7
}

package "Логіка (JavaScript)" {
  [Event Listener (Слухач)] as Listener #E2E8F0
  [Parser / Валідація] as Validator #E2E8F0
  [Обчислювальний модуль] as Core #E2E8F0
  [DOM Updater] as Updater #E2E8F0
}

User -> Form : 1. Введення значень
User -> Btn : 2. Клік "Розрахувати"
Btn -> Listener : trigger 'click'
Listener -> Validator : 3. Зчитування & перевірка
Validator -> Core : Валідні числа
Core -> Updater : 4. Фінальний результат
Updater -> Result : 5. Оновлення тексту та зняття .hidden
@enduml

Кожен вузол цієї схеми виконує строго ізольовану функцію. Якщо розрахунок неправильний — проблема в модулі обчислень. Якщо результат пораховано, але його не видно — проблема в модулі оновлення DOM.

Зчитування та перетворення вхідних даних

Найпоширеніша помилка початківців під час взаємодії з AI — ігнорування природи даних із веб-форм. Усі значення, отримані через властивість input.value, за замовчуванням є рядками (strings), навіть якщо поле має атрибут type="number".

Якщо AI згенерує код без явного перетворення типів, операція додавання перетвориться на конкатенацію рядків: "10" + "5" дасть "105", а не 15.

Приклад якісного коду обробки вхідних даних:

const pageInput = document.querySelector('#page-count');
const complexitySelect = document.querySelector('#text-complexity');
const calculateBtn = document.querySelector('#calc-btn');
const resultContainer = document.querySelector('#result-container');
const resultValue = document.querySelector('#result-value');

calculateBtn.addEventListener('click', () => {
  // 1. Отримання та конвертація даних
  const pages = Number(pageInput.value);
  const multiplier = Number(complexitySelect.value);

  // 2. Базова перевірка коректності
  if (!pages || pages <= 0) {
    showError("Будь ласка, вкажіть коректну кількість сторінок (більше 0).");
    return;
  }

  // 3. Обчислення значення
  const totalMinutes = pages * multiplier;

  // 4. Оновлення інтерфейсу
  resultValue.textContent = `${totalMinutes} хв`;
  resultContainer.classList.remove('hidden');
});

Керування переходами та станами без фреймворків

Оскільки наш проєкт не використовує важких бібліотек на кшталт React або Vue, найкращим і найнадійнішим способом перемикання станів є керування спеціальними CSS-класами видимості.

Найпростіший та найбільш стійкий патерн — використання класу .hidden:

/* style.css */
.hidden {
  display: none !important;
}

.result-card {
  transition: opacity 0.3s ease;
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 1.5rem;
}

Коли застосунок перебуває в початковому стані, елемент має клас class="result-card hidden". Після успішного розрахунку функція виконує element.classList.remove('hidden'), і блок плавно з'являється перед очима користувача. Якщо ж виникає помилка, цей блок знову приховується, а натомість відображається блок попередження.

Збереження першої робочої версії

Щойно ви перевірили, що основний користувацький сценарій успішно виконується від початку до кінця — вітаємо! Ви досягли критичної інженерної віхи. Ваш застосунок більше не є чорновиком або статичним макетом: це повноцінно працюючий цифровий продукт.

Негайно зафіксуйте цей стан у системі контролю версій або створіть збереження в AI IDE з тегом v1.0-working. Цей реліз є вашою гарантією успішного захисту курсу: навіть якщо всі подальші експерименти з додатковими функціями підуть не за планом, ви вже маєте готовий, працюючий прототип.

Практичні завдання та запитання для самоконтролю