📋 Урок 8: Поділитись деталями

🔍 ДЕТАЛЬНИЙ РОЗБІР КОЖНОГО РЯДКА:

1. async function copyToClipboard(text) { ... }
• async — ключове слово що робить функцію "асинхронною"
• function — оголошуємо функцію
• copyToClipboard — назва функції (що робить? копіює в буфер)
• (text) — параметр: який текст копіювати

2. try { ... } catch (err) { ... }
• try — "спробуй виконати цей код"
• catch (err) — "якщо помилка — зроби це" (err — об'єкт помилки)
• Це як план Б: якщо не вийшло — не падаємо, а обробляємо

3. await navigator.clipboard.writeText(text)
• navigator — об'єкт браузера (доступ до функцій пристрою)
• .clipboard — буфер обміну (куди йде Ctrl+C/Ctrl+V)
• .writeText(text) — "запиши текст в буфер"
• await — "зачекай поки закінчиться" (бо це Promise)

4. console.log('✅ Скопійовано!')
• console.log() — вивести повідомлення в консоль (F12 в браузері)
• Виконується ТІЛЬКИ якщо копіювання успішне

5. catch (err) { console.log('❌ Помилка:', err) }
• err — об'єкт помилки з описом що пішло не так
• Виконується якщо копіювання НЕ вдалося

⚠️ КОЛИ МОЖЕ БУТИ ПОМИЛКА:
• Сторінка не на HTTPS (localhost — виняток для розробки)
• Користувач заборонив доступ до clipboard
• Браузер дуже старий і не підтримує Clipboard API
• Вкладка не активна (в фоновому режимі)

🔍 ДЕТАЛЬНИЙ РОЗБІР ДВОХ СПОСОБІВ:

СПОСІБ 1: Promise з .then()

navigator.clipboard.writeText('Текст')
• Викликаємо метод копіювання
• Повертає Promise (обіцянку що колись буде результат)

.then(function() { ... })
• .then() — "коли Promise виконається — зроби це"
• function() { ... } — callback (що робити після успіху)

.catch(function(err) { ... })
• .catch() — "якщо помилка — зроби це"
• Обробка помилок через ланцюжок

---

СПОСІБ 2: async/await (РЕКОМЕНДОВАНО!)

async function copy() { ... }
• async — "ця функція працює з Promise"
• Дозволяє використовувати await всередині

await navigator.clipboard.writeText('Текст')
• await — "зачекай результат тут" (не йди далі)
• Код читається зверху вниз — як звичайний код!

try { ... } catch (err) { ... }
• try — блок для небезпечного коду
• catch — ловимо помилку якщо щось пішло не так

💡 ЧОМУ async/await КРАЩЕ:
• Код виглядає як звичайний (синхронний)
• Легше читати — йде зверху вниз
• Немає "пірамід" з callback-ів
• await можна використовувати ТІЛЬКИ в async функції!

⚠️ ВАЖЛИВО:
• Clipboard API потребує HTTPS (або localhost)
• Деякі браузери питають дозвіл у користувача

🔍 ДЕТАЛЬНИЙ РОЗБІР КОЖНОГО РЯДКА:

1. const copyBtn = document.getElementById('copyDetails')
• const — створюємо константу (не змінну)
• document.getElementById() — знайди елемент по id
• 'copyDetails' — id кнопки в HTML
• Тепер copyBtn — це наша кнопка!

2. const copyStatus = document.getElementById('copyStatus')
• Так само знаходимо елемент для показу статусу
• Сюди будемо писати "Скопійовано" або "Помилка"

3. copyBtn.addEventListener('click', async function() {...})
• copyBtn — наша кнопка
• .addEventListener() — "слухай подію"
• 'click' — яку подію? клік
• async function() — асинхронна функція (бо буде await)

4. const details = `...`
• const — створюємо константу
• ` ` — шаблонний рядок (можна писати в кілька рядків)
• Зберігаємо текст який будемо копіювати

5. await navigator.clipboard.writeText(details)
• await — чекаємо результат
• navigator.clipboard — буфер обміну
• .writeText(details) — записуємо текст details

6. copyStatus.textContent = '✅ Скопійовано!'
• copyStatus — елемент для статусу
• .textContent — текстовий вміст елемента
• = '...' — змінюємо текст на "Скопійовано!"

7. setTimeout(function() {...}, 2000)
• setTimeout() — "виконай через N мілісекунд"
• 2000 — 2000 мс = 2 секунди
• function() { copyStatus.textContent = '' } — очищаємо текст
• Результат: через 2 секунди повідомлення зникає!

✨ UX ПОРАДИ (User Experience):
• Завжди показуй статус — користувач має знати що сталось
• Автоматично прибирай повідомлення через 2-3 секунди
• Можна замість тексту змінювати саму кнопку (з "Копіювати" на "Скопійовано")