` елемент је празан, што значи да се ништа неће приказати на екрану док не додамо неки садржај. Такође му дајемо `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`, сада би требало да видите листу трансакција на контролној табли 🎉. --- ## 🚀 Изазов Радите заједно како бисте страницу контролне табле учинили да изгледа као права апликација за банкарство. Ако сте већ стилизовали своју апликацију, покушајте да користите [media queries](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). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не сносимо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.