` елемент је празан, што значи да ништа неће бити приказано на екрану док не додамо неки садржај. Такође му дајемо `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 региона који се зове 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` налог који је већ попуњен подацима. ### Задатак Почнимо заменом секције "Balance" у 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 ``` Овај шаблон представља један ред табеле, са 3 колоне које желимо да попунимо: *датум*, *објекат* и *износ* трансакције. Затим, додајте овај `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) --- **Одрицање од одговорности**: Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не сносимо одговорност за било каква погрешна тумачења или неспоразуме који могу произаћи из коришћења овог превода.