` je prazen, kar pomeni, da na zaslonu ne bo prikazano nič, dokler mu ne dodamo vsebine. Prav tako mu dodelimo `id`, da ga lahko enostavno pridobimo z JavaScriptom. Vrnite se v datoteko `app.js` in ustvarite novo pomožno funkcijo `updateElement`: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` Ta funkcija je precej preprosta: glede na *id* elementa in *besedilo* bo posodobila besedilno vsebino DOM elementa z ustreznim `id`. Uporabimo to metodo namesto prejšnjega sporočila o napaki v funkciji `login`: ```js if (data.error) { return updateElement('loginError', data.error); } ``` Zdaj, če poskusite prijavo z neveljavnim računom, bi morali videti nekaj takega:  Zdaj imamo besedilo o napaki, ki se prikaže vizualno, vendar če ga poskusite z bralnikom zaslona, boste opazili, da se nič ne napove. Da bi besedilo, ki je dinamično dodano na stran, napovedali bralniki zaslona, mora uporabljati nekaj, kar se imenuje [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Tukaj bomo uporabili posebno vrsto live regije, imenovano opozorilo: ```html ``` Enako vedenje implementirajte za napake funkcije `register` (ne pozabite posodobiti HTML-ja). ## Prikaz informacij na nadzorni plošči Z uporabo istih tehnik, ki smo jih pravkar videli, bomo poskrbeli tudi za prikaz informacij o računu na strani nadzorne plošče. Tako izgleda objekt računa, pridobljen s strežnika: ```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 } ], } ``` > Opomba: da si olajšate delo, lahko uporabite že obstoječi račun `test`, ki je že napolnjen s podatki. ### Naloga Začnimo z zamenjavo razdelka "Balance" v HTML-ju, da dodamo elemente z rezerviranim mestom: ```html

Balance:

``` Dodali bomo tudi nov razdelek tik pod tem, da prikažemo opis računa: ```html

``` ✅ Ker opis računa deluje kot naslov za vsebino pod njim, je označen semantično kot naslov. Več o tem, kako je [struktura naslovov](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) pomembna za dostopnost, in kritično preglejte stran, da ugotovite, kaj bi še lahko bilo naslov. Nato bomo v `app.js` ustvarili novo funkcijo za zapolnitev rezerviranih mest: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` Najprej preverimo, ali imamo potrebne podatke o računu, preden nadaljujemo. Nato uporabimo funkcijo `updateElement()`, ki smo jo ustvarili prej, za posodobitev HTML-ja. > Da bi bil prikaz stanja lepši, uporabimo metodo [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed), da prisilimo prikaz vrednosti z 2 decimalnima mestoma. Zdaj moramo poklicati našo funkcijo `updateDashboard()` vsakič, ko je nadzorna plošča naložena. Če ste že dokončali [nalogo iz lekcije 1](../1-template-route/assignment.md), bi moralo biti to enostavno, sicer lahko uporabite naslednjo implementacijo. Dodajte to kodo na konec funkcije `updateRoute()`: ```js if (typeof route.init === 'function') { route.init(); } ``` In posodobite definicijo poti z: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` S to spremembo se funkcija `updateDashboard()` pokliče vsakič, ko je prikazana stran nadzorne plošče. Po prijavi bi morali nato videti stanje računa, valuto in opis. ## Dinamično ustvarjanje vrstic tabele z HTML predlogami V [prvi lekciji](../1-template-route/README.md) smo uporabili HTML predloge skupaj z metodo [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) za implementacijo navigacije v naši aplikaciji. Predloge so lahko tudi manjše in se uporabljajo za dinamično zapolnjevanje ponavljajočih se delov strani. Uporabili bomo podoben pristop za prikaz seznama transakcij v HTML tabeli. ### Naloga Dodajte novo predlogo v `` HTML-ja: ```html ``` Ta predloga predstavlja eno vrstico tabele s tremi stolpci, ki jih želimo zapolniti: *datum*, *objekt* in *znesek* transakcije. Nato dodajte to lastnost `id` elementu `` tabele znotraj predloge nadzorne plošče, da ga lažje najdete z JavaScriptom: ```html ``` Naš HTML je pripravljen, preklopimo na JavaScript kodo in ustvarimo novo funkcijo `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; } ``` Ta funkcija naredi točno to, kar njen naziv nakazuje: z uporabo predloge, ki smo jo ustvarili prej, ustvari novo vrstico tabele in zapolni njeno vsebino z podatki o transakciji. To bomo uporabili v naši funkciji `updateDashboard()` za zapolnitev tabele: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` Tukaj uporabimo metodo [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment), ki ustvari nov DOM fragment, na katerem lahko delamo, preden ga končno pritrdimo na našo HTML tabelo. Še vedno moramo narediti eno stvar, preden lahko ta koda deluje, saj naša funkcija `updateElement()` trenutno podpira samo besedilno vsebino. Spremenimo njeno kodo: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` Uporabimo metodo [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append), saj omogoča pritrditev bodisi besedila bodisi [DOM vozlišč](https://developer.mozilla.org/docs/Web/API/Node) na starševski element, kar je popolno za vse naše primere uporabe. Če poskusite uporabiti račun `test` za prijavo, bi morali zdaj na nadzorni plošči videti seznam transakcij 🎉. --- ## 🚀 Izziv Sodelujte in poskrbite, da bo stran nadzorne plošče videti kot prava bančna aplikacija. Če ste svojo aplikacijo že oblikovali, poskusite uporabiti [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries), da ustvarite [odziven dizajn](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks), ki bo dobro deloval tako na namiznih kot na mobilnih napravah. Tukaj je primer oblikovane strani nadzorne plošče:  ## Kviz po predavanju [Kviz po predavanju](https://ff-quizzes.netlify.app/web/quiz/46) ## Naloga [Refaktorirajte in komentirajte svojo kodo](assignment.md) --- **Omejitev odgovornosti**: Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.