` з `id="quote"` | | Область повідомлень | Відображає статус і повідомлення про успіх | `

` з `id="message"` | | Текстове поле | Місце, де гравці вводять цитату | `` з `id="typed-value"` | | Кнопка старту | Починає гру | `` з `id="start"` | **Розуміння структури інтерфейсу:** - **Організовує** контент логічно зверху вниз - **Призначає** унікальні ID елементам для цільового використання в JavaScript - **Забезпечує** чітку візуальну ієрархію для кращого досвіду користувача - **Включає** семантичні HTML-елементи для доступності Кожен з них потребуватиме ID, щоб ми могли працювати з ними в нашому JavaScript. Ми також додамо посилання на CSS і JavaScript файли, які ми створимо. Створіть новий файл під назвою `index.html`. Додайте наступний HTML: ```html

Typing game!

Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!

Start ``` **Розбір того, що досягає ця структура HTML:** - **Підключає** CSS-стилі у `` для стилізації - **Створює** чіткий заголовок і інструкції для користувачів - **Встановлює** заповнювачі абзаців з конкретними ID для динамічного контенту - **Включає** текстове поле з атрибутами доступності - **Надає** кнопку старту для запуску гри - **Завантажує** JavaScript-файл в кінці для оптимальної продуктивності ### Запуск додатка Часте тестування вашого додатка під час розробки допомагає виявляти проблеми на ранніх етапах і бачити ваш прогрес у реальному часі. Live Server — це незамінний інструмент, який автоматично оновлює ваш браузер, коли ви зберігаєте зміни, роблячи розробку набагато ефективнішою. Завжди краще розробляти поступово, щоб бачити, як виглядає ваш додаток. Давайте запустимо наш додаток. У Visual Studio Code є чудове розширення під назвою [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon), яке буде як локально хостити ваш додаток, так і оновлювати браузер кожного разу, коли ви зберігаєте. **Встановіть [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon), перейшовши за посиланням і натиснувши "Install":** **Ось що відбувається під час встановлення:** - **Відкриває** ваш браузер для запуску Visual Studio Code - **Проводить** вас через процес встановлення розширення - **Може вимагати** перезапуску Visual Studio Code для завершення налаштування **Після встановлення у Visual Studio Code натисніть Ctrl-Shift-P (або Cmd-Shift-P), щоб відкрити командну панель:** **Розуміння командної панелі:** - **Надає** швидкий доступ до всіх команд VS Code - **Шукає** команди під час введення - **Пропонує** комбінації клавіш для швидшої розробки **Введіть "Live Server: Open with Live Server":** **Що робить Live Server:** - **Запускає** локальний сервер розробки для вашого проекту - **Автоматично** оновлює браузер при збереженні файлів - **Слугує** вашими файлами з локального URL (зазвичай `localhost:5500`) **Відкрийте браузер і перейдіть на `https://localhost:5500`:** Тепер ви повинні побачити створену вами сторінку! Давайте додамо трохи функціональності. ## Додати CSS Тепер давайте зробимо все гарним! Візуальний зворотний зв'язок був важливим для інтерфейсів користувача з ранніх днів обчислювальної техніки. У 1980-х роках дослідники виявили, що миттєвий візуальний зворотний зв'язок значно покращує продуктивність користувачів і зменшує кількість помилок. Саме це ми збираємося створити. Наша гра повинна чітко показувати, що відбувається. Гравці повинні миттєво знати, яке слово вони повинні набирати, і якщо вони зроблять помилку, вони повинні побачити це одразу. Давайте створимо простий, але ефективний стиль: Створіть новий файл під назвою `style.css` і додайте наступний синтаксис. ```css /* inside style.css */ .highlight { background-color: yellow; } .error { background-color: lightcoral; border: red; } ``` **Розуміння цих CSS-класів:** - **Виділяє** поточне слово жовтим фоном для чіткої візуальної орієнтації - **Сигналізує** про помилки набору тексту світло-кораловим кольором фону - **Надає** миттєвий зворотний зв'язок без переривання процесу набору тексту - **Використовує** контрастні кольори для доступності і чіткої візуальної комунікації ✅ Що стосується CSS, ви можете оформити вашу сторінку так, як вам подобається. Приділіть трохи часу і зробіть сторінку більш привабливою: - Виберіть інший шрифт - Змініть кольори заголовків - Змініть розміри елементів ## JavaScript Ось де стає цікаво! 🎉 У нас є структура HTML і стилізація CSS, але зараз наша гра схожа на красиву машину без двигуна. JavaScript стане тим двигуном — саме він змусить все працювати і реагувати на дії гравців. Тут ви побачите, як ваше творіння оживає. Ми будемо виконувати це крок за кроком, щоб нічого не здавалося надто складним: | Крок | Призначення | Чому ви навчитеся | |------|-------------|-------------------| | [Створення констант](#add | Масив цитат | Зберігає всі можливі цитати для гри | `['Цитата 1', 'Цитата 2', ...]` | | Масив слів | Розбиває поточну цитату на окремі слова | `['Коли', 'ти', 'маєш', ...]` | | Індекс слова | Відстежує, яке слово гравець вводить | `0, 1, 2, 3...` | | Час початку | Розраховує витрачений час для оцінки | `Date.now()` | **Нам також потрібні посилання на елементи інтерфейсу:** | Елемент | ID | Призначення | |---------|----|-------------| | Текстове поле | `typed-value` | Місце, де гравці вводять текст | | Відображення цитати | `quote` | Показує цитату для введення | | Область повідомлень | `message` | Відображає оновлення статусу | ```javascript // inside script.js // all of our quotes const quotes = [ 'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.', 'There is nothing more deceptive than an obvious fact.', 'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.', 'I never make exceptions. An exception disproves the rule.', 'What one man can invent another can discover.', 'Nothing clears up a case so much as stating it to another person.', 'Education never ends, Watson. It is a series of lessons, with the greatest for the last.', ]; // store the list of words and the index of the word the player is currently typing let words = []; let wordIndex = 0; // the starting time let startTime = Date.now(); // page elements const quoteElement = document.getElementById('quote'); const messageElement = document.getElementById('message'); const typedValueElement = document.getElementById('typed-value'); ``` **Розбираємо, що робить цей код налаштування:** - **Зберігає** масив цитат Шерлока Холмса за допомогою `const`, оскільки цитати не змінюються - **Ініціалізує** змінні для відстеження за допомогою `let`, оскільки ці значення будуть оновлюватися під час гри - **Отримує** посилання на елементи DOM за допомогою `document.getElementById()` для ефективного доступу - **Створює** основу для всієї функціональності гри з чіткими, описовими назвами змінних - **Організовує** пов’язані дані та елементи логічно для легшого обслуговування коду ✅ Додайте більше цитат до вашої гри > 💡 **Корисна порада**: Ми можемо отримувати елементи в будь-який момент у коді за допомогою `document.getElementById()`. Оскільки ми будемо часто звертатися до цих елементів, ми уникнемо помилок у рядкових літералах, використовуючи константи. Фреймворки, такі як [Vue.js](https://vuejs.org/) або [React](https://reactjs.org/), можуть допомогти вам краще централізувати ваш код. > **Чому цей підхід працює так добре:** - **Запобігає** орфографічним помилкам при багаторазовому зверненні до елементів - **Покращує** читабельність коду завдяки описовим назвам констант - **Дозволяє** кращу підтримку IDE з автозаповненням і перевіркою помилок - **Полегшує** рефакторинг, якщо ID елементів зміняться пізніше Перегляньте відео про використання `const`, `let` і `var` [](https://youtube.com/watch?v=JNIXfGiDWM8 "Типи змінних") > 🎥 Натисніть на зображення вище, щоб переглянути відео про змінні. ### Додайте логіку старту Ось де все стає на свої місця! 🚀 Ви збираєтеся написати свій перший справжній обробник подій, і є щось дуже задовільне в тому, щоб побачити, як ваш код реагує на натискання кнопки. Подумайте про це: десь там гравець натисне кнопку "Старт", і ваш код має бути готовий до цього. Ми не знаємо, коли вони це зроблять — можливо, одразу, можливо, після того, як вони вип’ють каву — але коли це станеться, ваша гра оживе. Коли користувач натискає `start`, нам потрібно вибрати цитату, налаштувати інтерфейс користувача та налаштувати відстеження поточного слова та часу. Нижче наведено JavaScript, який вам потрібно додати; ми обговоримо його після блоку скрипта. ```javascript // at the end of script.js document.getElementById('start').addEventListener('click', () => { // get a quote const quoteIndex = Math.floor(Math.random() * quotes.length); const quote = quotes[quoteIndex]; // Put the quote into an array of words words = quote.split(' '); // reset the word index for tracking wordIndex = 0; // UI updates // Create an array of span elements so we can set a class const spanWords = words.map(function(word) { return `${word} `}); // Convert into string and set as innerHTML on quote display quoteElement.innerHTML = spanWords.join(''); // Highlight the first word quoteElement.childNodes[0].className = 'highlight'; // Clear any prior messages messageElement.innerText = ''; // Setup the textbox // Clear the textbox typedValueElement.value = ''; // set focus typedValueElement.focus(); // set the event handler // Start the timer startTime = new Date().getTime(); }); ``` **Розбираємо код на логічні секції:** **📊 Налаштування відстеження слів:** - **Вибирає** випадкову цитату за допомогою `Math.floor()` і `Math.random()` для різноманітності - **Перетворює** цитату в масив окремих слів за допомогою `split(' ')` - **Скидає** `wordIndex` на 0, оскільки гравці починають з першого слова - **Готує** стан гри для нового раунду **🎨 Налаштування інтерфейсу та відображення:** - **Створює** масив елементів ``, обгортаючи кожне слово для індивідуального стилю - **Об’єднує** елементи span в один рядок для ефективного оновлення DOM - **Виділяє** перше слово, додаючи клас CSS `highlight` - **Очищає** будь-які попередні повідомлення гри, щоб забезпечити чистий старт **⌨️ Підготовка текстового поля:** - **Очищає** будь-який існуючий текст у полі введення - **Фокусується** на текстовому полі, щоб гравці могли негайно почати вводити текст - **Готує** область введення для нової ігрової сесії **⏱️ Ініціалізація таймера:** - **Фіксує** поточний час за допомогою `new Date().getTime()` - **Дозволяє** точний розрахунок швидкості набору тексту та часу завершення - **Починає** відстеження продуктивності для ігрової сесії ### Додайте логіку введення тексту Ось де ми вирішуємо серце нашої гри! Не хвилюйтеся, якщо це здається складним спочатку — ми розберемо кожну частину, і до кінця ви побачите, наскільки це логічно. Те, що ми тут створюємо, досить складне: кожного разу, коли хтось вводить літеру, наш код перевіряє, що вони ввели, дає їм зворотний зв’язок і вирішує, що має статися далі. Це схоже на те, як ранні текстові редактори, такі як WordStar у 1970-х роках, надавали зворотний зв’язок у реальному часі для друкарів. ```javascript // at the end of script.js typedValueElement.addEventListener('input', () => { // Get the current word const currentWord = words[wordIndex]; // get the current value const typedValue = typedValueElement.value; if (typedValue === currentWord && wordIndex === words.length - 1) { // end of sentence // Display success const elapsedTime = new Date().getTime() - startTime; const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`; messageElement.innerText = message; } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) { // end of word // clear the typedValueElement for the new word typedValueElement.value = ''; // move to the next word wordIndex++; // reset the class name for all elements in quote for (const wordElement of quoteElement.childNodes) { wordElement.className = ''; } // highlight the new word quoteElement.childNodes[wordIndex].className = 'highlight'; } else if (currentWord.startsWith(typedValue)) { // currently correct // highlight the next word typedValueElement.className = ''; } else { // error state typedValueElement.className = 'error'; } }); ``` **Розуміння потоку логіки введення тексту:** Ця функція використовує каскадний підхід, перевіряючи умови від найконкретніших до найзагальніших. Розберемо кожен сценарій: ```mermaid flowchart TD A[Player types character] --> B[Get current word and typed value] B --> C{Quote complete?} C -->|Yes| D[Show completion message with time] C -->|No| E{Word complete with space?} E -->|Yes| F[Clear input, move to next word, update highlight] E -->|No| G{Typing correctly so far?} G -->|Yes| H[Remove error styling] G -->|No| I[Show error styling] ``` **🏁 Завершення цитати (Сценарій 1):** - **Перевіряє**, чи введене значення відповідає поточному слову І ми на останньому слові - **Розраховує** витрачений час, віднімаючи час початку від поточного часу - **Перетворює** мілісекунди в секунди, ділячи на 1,000 - **Відображає** привітальне повідомлення з часом завершення **✅ Завершення слова (Сценарій 2):** - **Виявляє** завершення слова, коли введення закінчується пробілом - **Перевіряє**, що обрізане введення точно відповідає поточному слову - **Очищає** поле введення для наступного слова - **Переходить** до наступного слова, збільшуючи `wordIndex` - **Оновлює** візуальне виділення, видаляючи всі класи та виділяючи нове слово **📝 Введення триває (Сценарій 3):** - **Перевіряє**, що поточне слово починається з того, що було введено - **Видаляє** будь-яке стилювання помилок, щоб показати, що введення правильне - **Дозволяє** продовжувати введення без переривань **❌ Стан помилки (Сценарій 4):** - **Спрацьовує**, коли введений текст не відповідає початку очікуваного слова - **Застосовує** клас CSS помилки для негайного візуального зворотного зв’язку - **Допомагає** гравцям швидко виявити та виправити помилки ## Тестуйте ваш додаток Подивіться, що ви досягли! 🎉 Ви щойно створили справжню робочу гру для набору тексту з нуля, використовуючи програмування, кероване подіями. Зробіть паузу, щоб оцінити це — це не маленьке досягнення! Тепер настав етап тестування! Чи працює все так, як очікувалося? Чи щось пропустили? Ось у чому справа: якщо щось не працює ідеально з першого разу, це абсолютно нормально. Навіть досвідчені розробники регулярно знаходять помилки у своєму коді. Це все частина процесу розробки! Натисніть `start` і починайте вводити текст! Це має виглядати приблизно як анімація, яку ми бачили раніше.  **Що тестувати у вашому додатку:** - **Перевіряє**, що натискання кнопки "Старт" відображає випадкову цитату - **Підтверджує**, що введення тексту правильно виділяє поточне слово - **Перевіряє**, що стилювання помилок з’являється при неправильному введенні - **Гарантує**, що завершення слів правильно переміщує виділення - **Тестує**, що завершення цитати показує повідомлення про завершення з часом **Поширені поради щодо налагодження:** - **Перевірте** консоль браузера (F12) на наявність помилок JavaScript - **Переконайтеся**, що всі назви файлів точно збігаються (чутливі до регістру) - **Переконайтеся**, що Live Server працює та правильно оновлюється - **Тестуйте** різні цитати, щоб перевірити, чи працює випадковий вибір --- ## Виклик GitHub Copilot Agent 🎮 Використовуйте режим Agent, щоб виконати наступний виклик: **Опис:** Розширте гру для набору тексту, реалізувавши систему складності, яка змінює гру залежно від продуктивності гравця. Цей виклик допоможе вам практикувати обробку подій, аналіз даних і динамічні оновлення інтерфейсу. **Завдання:** Створіть систему регулювання складності для гри, яка: 1. Відстежує швидкість набору тексту гравця (слова за хвилину) і відсоток точності 2. Автоматично регулює три рівні складності: Легкий (простий цитати), Середній (поточні цитати), Складний (складні цитати з пунктуацією) 3. Відображає поточний рівень складності та статистику гравця в інтерфейсі 4. Реалізує лічильник серій, який збільшує складність після 3 послідовних хороших результатів 5. Додає візуальний зворотний зв’язок (кольори, анімації), щоб вказати на зміну складності Додайте необхідні HTML-елементи, стилі CSS і функції JavaScript для реалізації цієї функції. Включіть належну обробку помилок і переконайтеся, що гра залишається доступною з відповідними ARIA-мітками. Дізнайтеся більше про [режим Agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) тут. ## 🚀 Виклик Готові вивести вашу гру для набору тексту на новий рівень? Спробуйте реалізувати ці розширені функції, щоб поглибити ваше розуміння обробки подій і маніпуляції DOM: **Додайте більше функціональності:** | Функція | Опис | Навички, які ви будете практикувати | |---------|-------------|------------------------| | **Контроль введення** | Вимкніть обробник подій `input` після завершення та увімкніть його, коли натиснута кнопка | Управління подіями та контроль стану | | **Управління станом інтерфейсу** | Вимкніть текстове поле, коли гравець завершує цитату | Маніпуляція властивостями DOM | | **Модальне вікно** | Відобразіть модальне вікно з повідомленням про успіх | Розширені шаблони інтерфейсу та доступність | | **Система високих балів** | Зберігайте високі бали за допомогою `localStorage` | API зберігання браузера та збереження даних | **Поради щодо реалізації:** - **Досліджуйте** `localStorage.setItem()` і `localStorage.getItem()` для постійного зберігання - **Практикуйте** додавання та видалення обробників подій динамічно - **Досліджуйте** HTML-елементи діалогу або шаблони модальних вікон CSS - **Розгляньте** доступність при вимкненні та ввімкненні елементів форми ## Післялекційний тест [Післялекційний тест](https://ff-quizzes.netlify.app/web/quiz/22) --- ## 🚀 Ваш таймлайн майстерності гри для набору тексту ### ⚡ **Що ви можете зробити за наступні 5 хвилин** - [ ] Протестуйте вашу гру для набору тексту з різними цитатами, щоб переконатися, що вона працює гладко - [ ] Експериментуйте зі стилями CSS — спробуйте змінити кольори виділення та помилок - [ ] Відкрийте DevTools вашого браузера (F12) і спостерігайте за Консоллю під час гри - [ ] Викличте себе завершити цитату якомога швидше ### ⏰ **Що ви можете досягти за годину** - [ ] Додайте більше цитат до масиву (можливо, з ваших улюблених книг або фільмів) - [ ] Реалізуйте систему високих балів `localStorage` із секції викликів - [ ] Створіть калькулятор слів за хвилину, який відображається після кожної гри - [ ] Додайте звукові ефекти для правильного введення, помилок і завершення ### 📅 **Ваш тижневий пригодницький план** - [ ] Створіть багатокористувацьку версію, де друзі можуть змагатися поруч - [ ] Створіть різні рівні складності з різною складністю цитат - [ ] Додайте індикатор прогресу, який показує, скільки цитати завершено - [ ] Реалізуйте облікові записи користувачів із відстеженням персональної статистики - [ ] Розробіть власні теми та дозвольте користувачам вибирати бажаний стиль ### 🗓️ **Ваш місячний план трансформації** - [ ] Створіть курс набору тексту з уроками, які поступово навчають правильного розташування пальців - [ ] Створіть аналітику, яка показує, які літери або слова викликають найбільше помилок - [ ] Додайте підтримку різних мов і розкладок клавіатури - [ ] Інтегруйте з освітніми API для отримання цитат із літературних баз даних - [ ] Опублікуйте вашу вдосконалену гру для набору тексту, щоб інші могли її використовувати та насолоджуватися ### 🎯 **Остаточна перевірка рефлексії** **Перш ніж рухатися далі, зробіть паузу, щоб відсвяткувати:** - Який момент був найбільш задовільним під час створення цієї гри? - Як ви зараз ставитеся до програмування, керованого подіями, порівняно з тим, коли ви почали? - Яку функцію ви хочете додати, щоб зробити цю гру унікальною? - Як ви можете застосувати концепції обробки подій до інших проєктів? ```mermaid journey title Your Event Programming Confidence Journey section Today Understanding Events: 3: You Building UI: 4: You Writing Event Listeners: 5: You section This Week Adding Features: 4: You Debugging Issues: 5: You Enhancing UX: 4: You section Next Month Building Complex Apps: 5: You Teaching Others: 5: You Creating Frameworks: 5: You ``` > 🌟 **Пам’ятайте**: Ви щойно освоїли одну з --- **Відмова від відповідальності**: Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.