` елемент е празен, което означава, че нищо няма да се показва на екрана, докато не добавим съдържание към него. Също така му даваме `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). Тук ще използваме специфичен тип жива област, наречена предупреждение: ```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 таблица. Остава Ако опитате да влезете с акаунта `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) --- **Отказ от отговорност**: Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.