` element je prázdny, čo znamená, že na obrazovke sa nič nezobrazí, kým do neho nepridáme nejaký obsah. Tiež mu priradíme `id`, aby sme ho mohli ľahko získať pomocou JavaScriptu. Vráťte sa do súboru `app.js` a vytvorte novú pomocnú funkciu `updateElement`: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` Táto funkcia je pomerne jednoduchá: na základe *id* elementu a *textu* aktualizuje textový obsah DOM elementu s odpovedajúcim `id`. Použime túto metódu namiesto predchádzajúcej chybovej správy vo funkcii `login`: ```js if (data.error) { return updateElement('loginError', data.error); } ``` Teraz, ak sa pokúsite prihlásiť s neplatným účtom, mali by ste vidieť niečo takéto:  Teraz máme chybový text, ktorý sa vizuálne zobrazí, ale ak to skúsite s čítačkou obrazovky, všimnete si, že nič nie je oznámené. Aby text, ktorý je dynamicky pridaný na stránku, bol oznámený čítačkami obrazovky, bude potrebné použiť niečo nazývané [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Tu použijeme špecifický typ live region nazývaný alert: ```html ``` Implementujte rovnaké správanie pre chyby vo funkcii `register` (nezabudnite aktualizovať HTML). ## Zobrazenie informácií na dashboarde Pomocou rovnakých techník, ktoré sme práve videli, sa postaráme o zobrazenie informácií o účte na stránke dashboardu. Takto vyzerá objekt účtu prijatý zo servera: ```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 } ], } ``` > Poznámka: aby ste si uľahčili prácu, môžete použiť predvytvorený účet `test`, ktorý už obsahuje dáta. ### Úloha Začnime nahradením sekcie "Balance" v HTML, aby sme pridali zástupné elementy: ```html

Balance:

``` Pridáme tiež novú sekciu tesne pod ňu na zobrazenie popisu účtu: ```html

``` ✅ Keďže popis účtu funguje ako nadpis pre obsah pod ním, je označený semanticky ako nadpis. Zistite viac o tom, ako [štruktúra nadpisov](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) je dôležitá pre prístupnosť, a kriticky sa pozrite na stránku, aby ste určili, čo iné by mohlo byť nadpisom. Ďalej vytvoríme novú funkciu v `app.js`, ktorá vyplní zástupné elementy: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` Najprv skontrolujeme, či máme potrebné údaje o účte, predtým než budeme pokračovať. Potom použijeme funkciu `updateElement()`, ktorú sme vytvorili skôr, na aktualizáciu HTML. > Aby bol zobrazený zostatok krajší, používame metódu [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed), aby sme vynútili zobrazenie hodnoty s 2 desatinnými miestami. Teraz musíme zavolať našu funkciu `updateDashboard()` vždy, keď sa načíta stránka dashboardu. Ak ste už dokončili [úlohu z lekcie 1](../1-template-route/assignment.md), toto by malo byť jednoduché, inak môžete použiť nasledujúcu implementáciu. Pridajte tento kód na koniec funkcie `updateRoute()`: ```js if (typeof route.init === 'function') { route.init(); } ``` A aktualizujte definíciu trás s: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` S touto zmenou sa funkcia `updateDashboard()` zavolá vždy, keď sa zobrazí stránka dashboardu. Po prihlásení by ste mali byť schopní vidieť zostatok účtu, menu a popis. ## Dynamické vytváranie riadkov tabuľky pomocou HTML šablón V [prvej lekcii](../1-template-route/README.md) sme použili HTML šablóny spolu s metódou [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) na implementáciu navigácie v našej aplikácii. Šablóny môžu byť tiež menšie a používané na dynamické vyplnenie opakujúcich sa častí stránky. Použijeme podobný prístup na zobrazenie zoznamu transakcií v HTML tabuľke. ### Úloha Pridajte novú šablónu do `` HTML: ```html ``` Táto šablóna predstavuje jeden riadok tabuľky s 3 stĺpcami, ktoré chceme vyplniť: *dátum*, *objekt* a *suma* transakcie. Potom pridajte túto vlastnosť `id` do `` elementu tabuľky v šablóne dashboardu, aby bolo jednoduchšie ho nájsť pomocou JavaScriptu: ```html ``` Naše HTML je pripravené, prejdime na JavaScript kód a vytvorme novú funkciu `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; } ``` Táto funkcia robí presne to, čo naznačuje jej názov: pomocou šablóny, ktorú sme vytvorili skôr, vytvára nový riadok tabuľky a vyplní jeho obsah pomocou údajov o transakcii. Použijeme ju vo funkcii `updateDashboard()` na vyplnenie tabuľky: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` Tu používame metódu [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment), ktorá vytvára nový DOM fragment, na ktorom môžeme pracovať, predtým než ho nakoniec pripojíme k našej HTML tabuľke. Ešte je tu jedna vec, ktorú musíme urobiť, aby tento kód fungoval, keďže naša funkcia `updateElement()` momentálne podporuje iba textový obsah. Zmeňme jej kód trochu: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` Používame metódu [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append), pretože umožňuje pripojiť buď text alebo [DOM Nodes](https://developer.mozilla.org/docs/Web/API/Node) k nadradenému elementu, čo je ideálne pre všetky naše prípady použitia. Ak sa pokúsite prihlásiť pomocou účtu `test`, mali by ste teraz vidieť zoznam transakcií na hlavnom paneli 🎉. --- ## 🚀 Výzva Spolupracujte na tom, aby stránka hlavného panela vyzerala ako skutočná banková aplikácia. Ak ste už svoju aplikáciu naformátovali, skúste použiť [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) na vytvorenie [responzívneho dizajnu](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks), ktorý bude dobre fungovať na stolných počítačoch aj mobilných zariadeniach. Tu je príklad naformátovanej stránky hlavného panela:  ## Kvíz po prednáške [Kvíz po prednáške](https://ff-quizzes.netlify.app/web/quiz/46) ## Zadanie [Refaktorujte a okomentujte svoj kód](assignment.md) --- **Upozornenie**: Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.