`-elementti on tyhjä, mikä tarkoittaa, että mitään ei näytetä näytöllä, ennen kuin lisäämme siihen sisältöä. Annamme sille myös `id`-tunnisteen, jotta voimme hakea sen helposti JavaScriptillä. Palaa `app.js`-tiedostoon ja luo uusi apufunktio `updateElement`: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` Tämä funktio on melko suoraviivainen: annettuna elementin *id* ja *teksti*, se päivittää vastaavan DOM-elementin tekstisisällön. Käytetään tätä metodia aiemman virheilmoituksen tilalla `login`-funktiossa: ```js if (data.error) { return updateElement('loginError', data.error); } ``` Nyt, jos yrität kirjautua sisään virheellisellä tilillä, sinun pitäisi nähdä jotain tällaista:  Nyt meillä on visuaalisesti näkyvä virheteksti, mutta jos kokeilet sitä ruudunlukijalla, huomaat, että mitään ei ilmoiteta. Jotta dynaamisesti lisätty teksti sivulle ilmoitettaisiin ruudunlukijoilla, sen täytyy käyttää jotain, jota kutsutaan [Live Regioniksi](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Tässä käytämme erityistä live-alueen tyyppiä nimeltä alert: ```html ``` Toteuta sama toiminnallisuus myös `register`-funktion virheille (älä unohda päivittää HTML:ää). ## Näytä tietoja kojelaudalla Käyttämällä samoja tekniikoita, joita juuri opimme, huolehdimme myös tilitietojen näyttämisestä kojelautasivulla. Tältä palvelimelta saatu tilitieto-objekti näyttää: ```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 } ], } ``` > Huom: elämän helpottamiseksi voit käyttää olemassa olevaa `test`-tiliä, joka on jo täytetty tiedoilla. ### Tehtävä Aloitetaan korvaamalla "Saldo"-osio HTML:ssä lisäämällä paikkamerkki-elementit: ```html

Balance:

``` Lisäämme myös uuden osion juuri tämän alapuolelle tilin kuvauksen näyttämistä varten: ```html

``` ✅ Koska tilin kuvaus toimii otsikkona sen alapuolella olevalle sisällölle, se on merkitty semanttisesti otsikoksi. Opi lisää siitä, miksi [otsikkorakenne](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) on tärkeä saavutettavuuden kannalta, ja tarkastele kriittisesti sivua määrittääksesi, mitä muuta voisi olla otsikko. Seuraavaksi luomme uuden funktion `app.js`-tiedostoon paikkamerkin täyttämiseksi: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` Ensiksi tarkistamme, että meillä on tarvittavat tilitiedot ennen kuin jatkamme eteenpäin. Sitten käytämme aiemmin luomaamme `updateElement()`-funktiota HTML:n päivittämiseen. > Jotta saldon näyttö olisi siistimpi, käytämme metodia [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) pakottaaksemme arvon näyttämään kaksi desimaalia. Nyt meidän täytyy kutsua `updateDashboard()`-funktiota aina, kun kojelautasivu ladataan. Jos olet jo suorittanut [oppitunnin 1 tehtävän](../1-template-route/assignment.md), tämän pitäisi olla suoraviivaista, muuten voit käyttää seuraavaa toteutusta. Lisää tämä koodi `updateRoute()`-funktion loppuun: ```js if (typeof route.init === 'function') { route.init(); } ``` Ja päivitä reittien määrittely seuraavasti: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` Tämän muutoksen myötä aina, kun kojelautasivu näytetään, `updateDashboard()`-funktio kutsutaan. Kirjautumisen jälkeen sinun pitäisi nähdä tilin saldo, valuutta ja kuvaus. ## Luo taulukon rivit dynaamisesti HTML-mallien avulla [Ensimmäisessä oppitunnissa](../1-template-route/README.md) käytimme HTML-malleja yhdessä [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild)-metodin kanssa navigoinnin toteuttamiseen sovelluksessamme. Mallit voivat olla myös pienempiä ja niitä voidaan käyttää dynaamisesti toistuvien osien täyttämiseen sivulla. Käytämme samanlaista lähestymistapaa näyttääksemme tapahtumaluettelon HTML-taulukossa. ### Tehtävä Lisää uusi malli HTML-``-osioon: ```html ``` Tämä malli edustaa yksittäistä taulukkoriviä, jossa on kolme saraketta: *päivämäärä*, *kohde* ja *summa* tapahtumasta. Lisää sitten tämä `id`-ominaisuus kojelaudan taulukon ``-elementtiin, jotta se on helpompi löytää JavaScriptillä: ```html ``` HTML on valmis, siirrytään JavaScript-koodiin ja luodaan uusi funktio `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ämä funktio tekee juuri sen, mitä sen nimi viittaa: käyttämällä aiemmin luomaamme mallia se luo uuden taulukkorivin ja täyttää sen sisällön tapahtumatiedoilla. Käytämme tätä `updateDashboard()`-funktiossamme taulukon täyttämiseen: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` Tässä käytämme metodia [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment), joka luo uuden DOM-fragmentin, johon voimme tehdä muutoksia ennen sen liittämistä HTML-taulukkoon. On vielä yksi asia, joka meidän täytyy tehdä ennen kuin tämä koodi toimii, sillä `updateElement()`-funktiomme tukee tällä hetkellä vain tekstisisältöä. Muutetaan sen koodia hieman: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` Käytämme [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append)-metodia, koska sen avulla voimme liittää joko tekstiä tai [DOM-solmuja](https://developer.mozilla.org/docs/Web/API/Node) vanhempaan elementtiin, mikä sopii täydellisesti kaikkiin käyttötapauksiimme. Jos yrität kirjautua sisään käyttämällä `test`-tiliä, sinun pitäisi nyt nähdä tapahtumaluettelo hallintapaneelissa 🎉. --- ## 🚀 Haaste Työskennelkää yhdessä, jotta hallintapaneelisivusta saadaan näyttämään oikealta pankkisovellukselta. Jos olet jo muotoillut sovelluksesi, yritä käyttää [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) -ominaisuutta luodaksesi [responsiivisen suunnittelun](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks), joka toimii hyvin sekä työpöytä- että mobiililaitteilla. Tässä esimerkki muotoillusta hallintapaneelisivusta:  ## Luentojälkeinen kysely [Luentojälkeinen kysely](https://ff-quizzes.netlify.app/web/quiz/46) ## Tehtävä [Refaktoroi ja kommentoi koodisi](assignment.md) --- **Vastuuvapauslauseke**: Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Pyrimme tarkkuuteen, mutta huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulee pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskääntämistä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.