` порожній, тобто нічого не буде відображатися на екрані, поки ми не додамо до нього вміст. Ми також надаємо йому `id`, щоб легко отримати його за допомогою JavaScript. Поверніться до файлу `app.js` і створіть нову допоміжну функцію `updateElement`: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` Ця функція досить проста: отримавши *id* елемента та *текст*, вона оновлює текстовий вміст DOM-елемента з відповідним `id`. Використаємо цей метод замість попереднього повідомлення про помилку у функції `login`: ```js if (data.error) { return updateElement('loginError', data.error); } ``` Тепер, якщо ви спробуєте увійти з недійсним обліковим записом, ви побачите щось на кшталт цього:  Тепер у нас є текст помилки, який відображається візуально, але якщо ви спробуєте це з екранним читачем, ви помітите, що нічого не оголошується. Щоб текст, який динамічно додається на сторінку, оголошувався екранними читачами, він повинен використовувати щось, що називається [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Тут ми використаємо конкретний тип live region, який називається alert: ```html ``` Реалізуйте таку ж поведінку для помилок функції `register` (не забудьте оновити HTML). ## Відображення інформації на панелі управління Використовуючи ті ж техніки, які ми щойно розглянули, ми також займемося відображенням інформації облікового запису на сторінці панелі управління. Ось як виглядає об'єкт облікового запису, отриманий із сервера: ```json { "user": "test", "currency": "$", "description": "Test account", "balance": 75, "transactions": [ { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 }, { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 }, { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 } ], } ``` > Примітка: щоб полегшити собі життя, ви можете використовувати попередньо створений обліковий запис `test`, який вже заповнений даними. ### Завдання Почнемо з заміни розділу "Баланс" у HTML, щоб додати елементи-заповнювачі: ```html

Balance:

``` Ми також додамо новий розділ трохи нижче для відображення опису облікового запису: ```html

``` ✅ Оскільки опис облікового запису функціонує як заголовок для вмісту під ним, він семантично позначений як заголовок. Дізнайтеся більше про те, чому [структура заголовків](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) важлива для доступності, і критично оцініть сторінку, щоб визначити, що ще може бути заголовком. Далі ми створимо нову функцію в `app.js`, щоб заповнити елементи-заповнювачі: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` Спочатку ми перевіряємо, чи маємо необхідні дані облікового запису, перш ніж продовжувати. Потім ми використовуємо функцію `updateElement()`, яку створили раніше, для оновлення HTML. > Щоб зробити відображення балансу більш привабливим, ми використовуємо метод [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed), щоб примусово відображати значення з 2 цифрами після десяткової точки. Тепер нам потрібно викликати нашу функцію `updateDashboard()` кожного разу, коли завантажується сторінка панелі управління. Якщо ви вже завершили [завдання уроку 1](../1-template-route/assignment.md), це має бути просто, інакше ви можете використати наступну реалізацію. Додайте цей код у кінці функції `updateRoute()`: ```js if (typeof route.init === 'function') { route.init(); } ``` І оновіть визначення маршрутів: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` З цією зміною кожного разу, коли відображається сторінка панелі управління, викликається функція `updateDashboard()`. Після входу ви повинні побачити баланс облікового запису, валюту та опис. ## Динамічне створення рядків таблиці за допомогою HTML-шаблонів У [першому уроці](../1-template-route/README.md) ми використовували HTML-шаблони разом із методом [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) для реалізації навігації в нашому додатку. Шаблони також можуть бути меншими та використовуватися для динамічного заповнення повторюваних частин сторінки. Ми використаємо схожий підхід для відображення списку транзакцій у HTML-таблиці. ### Завдання Додайте новий шаблон у `` HTML: ```html ``` Цей шаблон представляє один рядок таблиці з трьома стовпцями, які ми хочемо заповнити: *дата*, *об'єкт* і *сума* транзакції. Потім додайте властивість `id` до елемента `` таблиці в шаблоні панелі управління, щоб його було легше знайти за допомогою JavaScript: ```html ``` Наш HTML готовий, перейдемо до JavaScript і створимо нову функцію `createTransactionRow`: ```js function createTransactionRow(transaction) { const template = document.getElementById('transaction'); const transactionRow = template.content.cloneNode(true); const tr = transactionRow.querySelector('tr'); tr.children[0].textContent = transaction.date; tr.children[1].textContent = transaction.object; tr.children[2].textContent = transaction.amount.toFixed(2); return transactionRow; } ``` Ця функція робить саме те, що її назва передбачає: використовуючи шаблон, який ми створили раніше, вона створює новий рядок таблиці та заповнює його вміст даними транзакції. Ми використаємо це у функції `updateDashboard()` для заповнення таблиці: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` Тут ми використовуємо метод [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment), який створює новий фрагмент DOM, з яким ми можемо працювати, перш ніж остаточно прикріпити його до нашої HTML-таблиці. Є ще одна річ, яку ми повинні зробити, перш ніж цей код зможе працювати, оскільки наша функція `updateElement()` наразі підтримує лише текстовий вміст. Змінімо її код трохи: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` Ми використовуємо метод [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append), оскільки він дозволяє прикріплювати як текст, так і [DOM-вузли](https://developer.mozilla.org/docs/Web/API/Node) до батьківського елемента, що ідеально підходить для всіх наших випадків Якщо ви спробуєте увійти за допомогою облікового запису `test`, тепер ви повинні побачити список транзакцій на панелі управління 🎉. --- ## 🚀 Виклик Працюйте разом, щоб зробити сторінку панелі управління схожою на справжній додаток для банкінгу. Якщо ви вже стилізували свій додаток, спробуйте використати [медіа-запити](https://developer.mozilla.org/docs/Web/CSS/Media_Queries), щоб створити [адаптивний дизайн](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks), який добре працює як на настільних комп’ютерах, так і на мобільних пристроях. Ось приклад стилізованої сторінки панелі управління:  ## Вікторина після лекції [Вікторина після лекції](https://ff-quizzes.netlify.app/web/quiz/46) ## Завдання [Рефакторизуйте та прокоментуйте ваш код](assignment.md) --- **Відмова від відповідальності**: Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.