` elem üres, ami azt jelenti, hogy semmi sem jelenik meg a képernyőn, amíg nem adunk hozzá tartalmat. Az `id` attribútumot is megadjuk, hogy könnyen lekérhessük JavaScript segítségével. Térj vissza az `app.js` fájlhoz, és hozz létre egy új segédfüggvényt `updateElement` néven: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` Ez a függvény elég egyszerű: egy elem *id*-jét és *szövegét* megadva frissíti a megfelelő `id`-val rendelkező DOM elem szövegtartalmát. Használjuk ezt a metódust a korábbi hibaüzenet helyett a `login` függvényben: ```js if (data.error) { return updateElement('loginError', data.error); } ``` Most, ha megpróbálsz bejelentkezni egy érvénytelen fiókkal, valami ilyesmit kell látnod:  Most már van egy vizuálisan megjelenő hibaüzenetünk, de ha képernyőolvasóval próbálod, észre fogod venni, hogy semmi sem kerül bejelentésre. Ahhoz, hogy a dinamikusan hozzáadott szöveget a képernyőolvasók is bejelentsék, egy úgynevezett [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) használatára lesz szükség. Itt egy speciális típusú live regiont, egy figyelmeztetést (alert) fogunk használni: ```html ``` Ugyanezt a viselkedést valósítsd meg a `register` függvény hibái esetén is (ne felejtsd el frissíteni a HTML-t). ## Információk megjelenítése a műszerfalon Ugyanazokat a technikákat használva, amelyeket az imént láttunk, gondoskodunk a fiókadatok megjelenítéséről a műszerfal oldalon. Ez így néz ki egy szervertől kapott fiókobjektum: ```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 } ], } ``` > Megjegyzés: hogy megkönnyítsük a dolgodat, használhatod az előre feltöltött `test` fiókot, amely már tartalmaz adatokat. ### Feladat Kezdjük azzal, hogy a HTML-ben lecseréljük az "Egyenleg" szekciót helyőrző elemekre: ```html

Balance:

``` Hozzáadunk egy új szekciót is közvetlenül alatta, hogy megjelenítsük a fiókleírást: ```html

``` ✅ Mivel a fiókleírás címként funkcionál az alatta lévő tartalomhoz, szemantikailag címsorként van megjelölve. Tudj meg többet arról, hogy a [címsorok struktúrája](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) miért fontos az akadálymentesség szempontjából, és vizsgáld meg kritikusan az oldalt, hogy meghatározd, mi más lehetne címsor. Ezután hozzunk létre egy új függvényt az `app.js` fájlban a helyőrzők kitöltéséhez: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` Először ellenőrizzük, hogy rendelkezünk-e a szükséges fiókadatokkal, mielőtt továbbmennénk. Ezután a korábban létrehozott `updateElement()` függvényt használjuk a HTML frissítéséhez. > Az egyenleg megjelenítésének szebbé tételéhez a [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) metódust használjuk, hogy az értéket 2 tizedesjeggyel jelenítsük meg. Most minden alkalommal, amikor a műszerfal betöltődik, meg kell hívnunk az `updateDashboard()` függvényt. Ha már befejezted az [1. lecke feladatát](../1-template-route/assignment.md), ez egyszerű lesz, különben használhatod a következő megvalósítást. Add hozzá ezt a kódot az `updateRoute()` függvény végéhez: ```js if (typeof route.init === 'function') { route.init(); } ``` És frissítsd az útvonalak definícióját ezzel: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` Ezzel a változtatással minden alkalommal, amikor a műszerfal oldal megjelenik, az `updateDashboard()` függvény hívódik meg. Bejelentkezés után látnod kell az egyenleget, a pénznemet és a leírást. ## Táblázatsorok dinamikus létrehozása HTML sablonokkal Az [első leckében](../1-template-route/README.md) HTML sablonokat használtunk a navigáció megvalósításához az alkalmazásunkban, a [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) metódussal együtt. A sablonok kisebbek is lehetnek, és használhatók az oldal ismétlődő részeinek dinamikus kitöltésére. Hasonló megközelítést fogunk alkalmazni a tranzakciók listájának megjelenítésére a HTML táblázatban. ### Feladat Adj hozzá egy új sablont a HTML `` részéhez: ```html ``` Ez a sablon egyetlen Ha a `test` fiókot használod a bejelentkezéshez, most már látnod kell egy tranzakciós listát a vezérlőpulton 🎉. --- ## 🚀 Kihívás Dolgozzatok együtt azon, hogy a vezérlőpult oldal úgy nézzen ki, mint egy valódi banki alkalmazás. Ha már formáztátok az alkalmazást, próbáljátok meg [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) használatával [reszponzív dizájnt](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) készíteni, amely jól működik mind asztali, mind mobil eszközökön. Íme egy példa egy formázott vezérlőpult oldalra:  ## Előadás utáni kvíz [Előadás utáni kvíz](https://ff-quizzes.netlify.app/web/quiz/46) ## Feladat [Refaktoráld és kommentáld a kódodat](assignment.md) --- **Felelősségkizárás**: Ez a dokumentum az [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordítási szolgáltatás segítségével készült. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális, emberi fordítást igénybe venni. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy téves értelmezésekért.