` element on tühi, mis tähendab, et ekraanil ei kuvata midagi, kuni me sellele sisu lisame. Samuti anname sellele `id`, et saaksime selle JavaScriptiga hõlpsasti kätte. Minge tagasi `app.js` faili ja looge uus abifunktsioon `updateElement`: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` See on üsna lihtne: antud elemendi *id* ja *tekst* abil uuendab see DOM-i elemendi tekstisisu, millel on vastav `id`. Kasutame seda meetodit eelmise veateate asemel `login` funktsioonis: ```js if (data.error) { return updateElement('loginError', data.error); } ``` Nüüd, kui proovite sisse logida kehtetu kontoga, peaksite nägema midagi sellist:  Nüüd on meil visuaalselt kuvatav veatekst, kuid kui proovite seda ekraanilugejaga, märkate, et midagi ei teatata. Selleks, et ekraanilugejad teataksid dünaamiliselt lehele lisatud teksti, peab see kasutama midagi, mida nimetatakse [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Siin kasutame konkreetset tüüpi live region'i, mida nimetatakse alert'iks: ```html ``` Rakendage sama käitumine `register` funktsiooni vigade jaoks (ärge unustage HTML-i uuendada). ## Teabe kuvamine armatuurlaual Kasutades samu tehnikaid, mida just nägime, hoolitseme ka kontoandmete kuvamise eest armatuurlaua lehel. Selline näeb välja serverist saadud konto objekt: ```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 } ], } ``` > Märkus: et teie elu lihtsamaks teha, saate kasutada eelnevalt olemasolevat `test` kontot, mis on juba andmetega täidetud. ### Ülesanne Alustame HTML-i "Saldo" sektsiooni asendamisest, lisades kohatäiteelemendid: ```html

Balance:

``` Lisame ka uue sektsiooni otse selle alla, et kuvada konto kirjeldust: ```html

``` ✅ Kuna konto kirjeldus toimib sisule allpool pealkirjana, on see semantiliselt märgitud pealkirjana. Lisateavet selle kohta, kui oluline on [pealkirjade struktuur](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) juurdepääsetavuse jaoks, ja vaadake kriitiliselt lehte, et määrata, mis veel võiks olla pealkiri. Järgmisena loome `app.js` faili uue funktsiooni, et täita kohatäited: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` Esiteks kontrollime, et meil oleks vajalikud kontoandmed, enne kui edasi läheme. Seejärel kasutame varem loodud `updateElement()` funktsiooni HTML-i uuendamiseks. > Et saldo kuvamine oleks ilusam, kasutame meetodit [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed), et sundida väärtust kuvama 2 komakohaga. Nüüd peame kutsuma oma `updateDashboard()` funktsiooni iga kord, kui armatuurlaua leht laaditakse. Kui olete juba lõpetanud [õppetüki 1 ülesande](../1-template-route/assignment.md), peaks see olema lihtne, vastasel juhul saate kasutada järgmist rakendust. Lisage see kood `updateRoute()` funktsiooni lõppu: ```js if (typeof route.init === 'function') { route.init(); } ``` Ja uuendage marsruutide määratlust: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` Selle muudatusega kutsutakse iga kord, kui armatuurlaua leht kuvatakse, funktsioon `updateDashboard()`. Pärast sisselogimist peaksite nägema konto saldot, valuutat ja kirjeldust. ## Tabeliridade dünaamiline loomine HTML-mallidega [Esimeses õppetükis](../1-template-route/README.md) kasutasime HTML-malle koos [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) meetodiga, et rakenduses navigeerimist rakendada. Mallid võivad olla ka väiksemad ja neid saab kasutada lehe korduvate osade dünaamiliseks täitmiseks. Kasutame sarnast lähenemist, et kuvada tehingute loend HTML-tabelis. ### Ülesanne Lisage HTML ``-sse uus mall: ```html ``` See mall esindab ühte tabelirida, millel on 3 veergu, mida soovime täita: tehingu *kuupäev*, *objekt* ja *summa*. Seejärel lisage tabeli `` elemendile armatuurlaua mallis see `id` atribuut, et seda JavaScriptiga lihtsam leida: ```html ``` Meie HTML on valmis, liigume JavaScripti koodi juurde ja loome uue funktsiooni `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; } ``` See funktsioon teeb täpselt seda, mida selle nimi viitab: kasutades varem loodud malli, loob see uue tabelirea ja täidab selle sisu tehinguandmetega. Kasutame seda oma `updateDashboard()` funktsioonis tabeli täitmiseks: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` Siin kasutame meetodit [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment), mis loob uue DOM-fragmendi, millega saame töötada, enne kui lõpuks selle HTML-tabelisse lisame. On veel üks asi, mida peame tegema, enne kui see kood töötab, kuna meie `updateElement()` funktsioon toetab praegu ainult tekstisisu. Muudame selle koodi veidi: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` Me kasutame [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) meetodit, kuna see võimaldab lisada vanemelemendile kas teksti või [DOM Node'id](https://developer.mozilla.org/docs/Web/API/Node), mis sobib ideaalselt kõigi meie kasutusjuhtude jaoks. Kui proovite `test` kontoga sisse logida, peaksite nüüd nägema armatuurlaual tehingute nimekirja 🎉. --- ## 🚀 Väljakutse Töötage koos, et muuta armatuurlaua leht tõelise pangarakenduse sarnaseks. Kui olete juba oma rakenduse kujundanud, proovige kasutada [meedia päringuid](https://developer.mozilla.org/docs/Web/CSS/Media_Queries), et luua [responsiivne disain](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks), mis töötab hästi nii lauaarvutites kui ka mobiilseadmetes. Siin on näide kujundatud armatuurlaua lehe tulemusest:  ## Loengu järgne viktoriin [Loengu järgne viktoriin](https://ff-quizzes.netlify.app/web/quiz/46) ## Ülesanne [Refaktoreeri ja kommenteeri oma kood](assignment.md) --- **Lahtiütlus**: See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest.