` element je prazan, što znači da se ništa neće prikazati na ekranu dok mu ne dodamo neki sadržaj. Također mu dodajemo `id` kako bismo ga lako dohvatili pomoću JavaScripta. Vratite se u datoteku `app.js` i kreirajte novu pomoćnu funkciju `updateElement`: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` Ova funkcija je prilično jednostavna: s obzirom na *id* elementa i *tekst*, ažurirat će tekstualni sadržaj DOM elementa s odgovarajućim `id`. Koristimo ovu metodu umjesto prethodne poruke o pogrešci u funkciji `login`: ```js if (data.error) { return updateElement('loginError', data.error); } ``` Sada, ako pokušate prijaviti se s nevažećim računom, trebali biste vidjeti nešto poput ovoga:  Sada imamo tekst pogreške koji se vizualno prikazuje, ali ako ga pokušate koristiti s čitačem ekrana, primijetit ćete da ništa nije najavljeno. Kako bi tekst koji se dinamički dodaje stranici bio najavljen čitačima ekrana, potrebno je koristiti nešto što se zove [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Ovdje ćemo koristiti specifičnu vrstu live regije nazvanu alert: ```html ``` Implementirajte isto ponašanje za pogreške funkcije `register` (ne zaboravite ažurirati HTML). ## Prikaz informacija na nadzornoj ploči Koristeći iste tehnike koje smo upravo vidjeli, također ćemo se pobrinuti za prikaz informacija o računu na stranici nadzorne ploče. Ovako izgleda objekt računa dobiven sa 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 } ], } ``` > Napomena: kako biste si olakšali posao, možete koristiti unaprijed postojeći `test` račun koji je već popunjen podacima. ### Zadatak Započnimo zamjenom sekcije "Balance" u HTML-u kako bismo dodali elemente rezerviranog mjesta: ```html

Balance:

``` Također ćemo dodati novu sekciju odmah ispod za prikaz opisa računa: ```html

``` ✅ Budući da opis računa funkcionira kao naslov za sadržaj ispod njega, označen je semantički kao naslov. Saznajte više o tome kako [struktura naslova](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) doprinosi pristupačnosti i kritički pogledajte stranicu kako biste utvrdili što još može biti naslov. Zatim ćemo kreirati novu funkciju u `app.js` za popunjavanje rezerviranih mjesta: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` Prvo provjeravamo imamo li potrebne podatke o računu prije nego što nastavimo dalje. Zatim koristimo funkciju `updateElement()` koju smo ranije kreirali za ažuriranje HTML-a. > Kako bismo prikaz stanja računa učinili ljepšim, koristimo metodu [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) kako bismo prisilili prikaz vrijednosti s 2 decimale. Sada trebamo pozvati našu funkciju `updateDashboard()` svaki put kada se učita stranica nadzorne ploče. Ako ste već završili [zadatak iz lekcije 1](../1-template-route/assignment.md), ovo bi trebalo biti jednostavno, inače možete koristiti sljedeću implementaciju. Dodajte ovaj kod na kraj funkcije `updateRoute()`: ```js if (typeof route.init === 'function') { route.init(); } ``` I ažurirajte definiciju ruta s: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` Ovom promjenom, svaki put kada se prikaže stranica nadzorne ploče, poziva se funkcija `updateDashboard()`. Nakon prijave, trebali biste moći vidjeti stanje računa, valutu i opis. ## Dinamičko kreiranje redaka tablice pomoću HTML predložaka U [prvoj lekciji](../1-template-route/README.md) koristili smo HTML predloške zajedno s metodom [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) za implementaciju navigacije u našoj aplikaciji. Predlošci također mogu biti manji i koristiti se za dinamičko popunjavanje ponavljajućih dijelova stranice. Koristit ćemo sličan pristup za prikaz popisa transakcija u HTML tablici. ### Zadatak Dodajte novi predložak u HTML ``: ```html ``` Ovaj predložak predstavlja jedan redak tablice, s 3 stupca koje želimo popuniti: *datum*, *objekt* i *iznos* transakcije. Zatim dodajte ovo svojstvo `id` elementu `` tablice unutar predloška nadzorne ploče kako biste ga lakše pronašli pomoću JavaScripta: ```html ``` Naš HTML je spreman, sada prelazimo na JavaScript kod i kreiramo novu funkciju `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; } ``` Ova funkcija radi upravo ono što joj ime sugerira: koristeći predložak koji smo ranije kreirali, kreira novi redak tablice i popunjava njegov sadržaj koristeći podatke o transakciji. Koristit ćemo ovo u našoj funkciji `updateDashboard()` za popunjavanje tablice: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` Ovdje koristimo metodu [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) koja kreira novi DOM fragment na kojem možemo raditi prije nego što ga konačno dodamo u našu HTML tablicu. Još uvijek postoji jedna stvar koju moramo učiniti prije nego što ovaj kod može raditi, budući da naša funkcija `updateElement()` trenutno podržava samo tekstualni sadržaj. Promijenimo njezin kod malo: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` Koristimo metodu [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) jer omogućuje dodavanje teksta ili [DOM čvorova](https://developer.mozilla.org/docs/Web/API/Node) roditeljskom elementu, što je savršeno za sve naše slučajeve. Ako pokušate koristiti račun `test` za prijavu, sada biste trebali vidjeti popis transakcija na nadzornoj ploči 🎉. --- ## 🚀 Izazov Suradnjom učinite da stranica nadzorne ploče izgleda kao prava aplikacija za bankarstvo. Ako ste već stilizirali svoju aplikaciju, pokušajte koristiti [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) kako biste stvorili [responzivni dizajn](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) koji dobro funkcionira na stolnim računalima i mobilnim uređajima. Evo primjera stilizirane stranice nadzorne ploče:  ## Kviz nakon predavanja [Kviz nakon predavanja](https://ff-quizzes.netlify.app/web/quiz/46) ## Zadatak [Refaktorirajte i komentirajte svoj kod](assignment.md) --- **Odricanje od odgovornosti**: Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.