` елемент е празен, което означава, че нищо няма да се показва на екрана, докато не добавим съдържание към него. Също така му даваме `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 таблица. Има още едно нещо, което трябва да направим, преди този код да заработи, тъй като нашата функция `updateElement()` в момента поддържа само текстово съдържание. Нека променим нейния код малко: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` Използваме Ако опитате да използвате акаунта `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). Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.