`-Element ist leer, was bedeutet, dass nichts auf dem Bildschirm angezeigt wird, bis wir ihm Inhalte hinzufügen. Wir geben ihm auch eine `id`, damit wir es leicht mit JavaScript abrufen können. Gehe zurück zur Datei `app.js` und erstelle eine neue Hilfsfunktion `updateElement`: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` Diese Funktion ist ziemlich einfach: Sie aktualisiert den Textinhalt des DOM-Elements mit der passenden `id`, basierend auf den übergebenen Parametern *id* und *text*. Verwenden wir diese Methode anstelle der vorherigen Fehlermeldung in der `login`-Funktion: ```js if (data.error) { return updateElement('loginError', data.error); } ``` Wenn du jetzt versuchst, dich mit einem ungültigen Konto anzumelden, solltest du etwas wie das Folgende sehen:  Jetzt haben wir einen Fehlertext, der visuell angezeigt wird. Wenn du jedoch einen Screenreader verwendest, wirst du feststellen, dass nichts angesagt wird. Damit Text, der dynamisch zu einer Seite hinzugefügt wird, von Screenreadern angesagt wird, muss er eine sogenannte [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) verwenden. Hier verwenden wir eine spezielle Art von Live-Region, die als Alert bezeichnet wird: ```html ``` Implementiere das gleiche Verhalten für die Fehler in der `register`-Funktion (vergiss nicht, das HTML zu aktualisieren). ## Informationen im Dashboard anzeigen Mit den gleichen Techniken, die wir gerade gesehen haben, kümmern wir uns auch um die Anzeige der Kontoinformationen auf der Dashboard-Seite. So sieht ein vom Server empfangenes Kontoobjekt aus: ```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 } ], } ``` > Hinweis: Um dir das Leben zu erleichtern, kannst du das vorgefertigte `test`-Konto verwenden, das bereits mit Daten gefüllt ist. ### Aufgabe Beginnen wir damit, den Abschnitt "Balance" im HTML zu ersetzen, um Platzhalterelemente hinzuzufügen: ```html

Balance:

``` Wir fügen auch einen neuen Abschnitt direkt darunter hinzu, um die Kontobeschreibung anzuzeigen: ```html

``` ✅ Da die Kontobeschreibung als Titel für den darunter liegenden Inhalt fungiert, wird sie semantisch als Überschrift ausgezeichnet. Erfahre mehr darüber, wie [Überschriftenstruktur](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) für die Barrierefreiheit wichtig ist, und wirf einen kritischen Blick auf die Seite, um zu bestimmen, was sonst noch eine Überschrift sein könnte. Als Nächstes erstellen wir eine neue Funktion in `app.js`, um die Platzhalter zu füllen: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` Zuerst überprüfen wir, ob wir die benötigten Kontodaten haben, bevor wir fortfahren. Dann verwenden wir die zuvor erstellte Funktion `updateElement()`, um das HTML zu aktualisieren. > Um die Anzeige des Kontostands ansprechender zu gestalten, verwenden wir die Methode [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed), um den Wert mit 2 Nachkommastellen anzuzeigen. Jetzt müssen wir unsere `updateDashboard()`-Funktion jedes Mal aufrufen, wenn das Dashboard geladen wird. Wenn du die [Aufgabe aus Lektion 1](../1-template-route/assignment.md) bereits abgeschlossen hast, sollte dies einfach sein. Andernfalls kannst du die folgende Implementierung verwenden. Füge diesen Code am Ende der Funktion `updateRoute()` hinzu: ```js if (typeof route.init === 'function') { route.init(); } ``` Und aktualisiere die Routen-Definition mit: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` Mit dieser Änderung wird die Funktion `updateDashboard()` jedes Mal aufgerufen, wenn die Dashboard-Seite angezeigt wird. Nach einem Login solltest du dann den Kontostand, die Währung und die Beschreibung sehen können. ## Tabellenzeilen dynamisch mit HTML-Templates erstellen In der [ersten Lektion](../1-template-route/README.md) haben wir HTML-Templates zusammen mit der Methode [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) verwendet, um die Navigation in unserer App zu implementieren. Templates können auch kleiner sein und verwendet werden, um sich wiederholende Teile einer Seite dynamisch zu füllen. Wir verwenden einen ähnlichen Ansatz, um die Liste der Transaktionen in der HTML-Tabelle anzuzeigen. ### Aufgabe Füge ein neues Template in den HTML-``-Bereich ein: ```html ``` Dieses Template stellt eine einzelne Tabellenzeile dar, mit den 3 Spalten, die wir füllen möchten: *Datum*, *Objekt* und *Betrag* einer Transaktion. Füge dann diese `id`-Eigenschaft zum ``-Element der Tabelle im Dashboard-Template hinzu, um es mit JavaScript leichter zu finden: ```html ``` Unser HTML ist bereit. Wechseln wir zum JavaScript-Code und erstellen eine neue Funktion `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; } ``` Diese Funktion macht genau das, was ihr Name andeutet: Sie verwendet das zuvor erstellte Template, um eine neue Tabellenzeile zu erstellen und deren Inhalte mit Transaktionsdaten zu füllen. Wir verwenden dies in unserer `updateDashboard()`-Funktion, um die Tabelle zu füllen: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` Hier verwenden wir die Methode [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment), die ein neues DOM-Fragment erstellt, mit dem wir arbeiten können, bevor wir es schließlich an unsere HTML-Tabelle anhängen. Es gibt noch eine Sache, die wir tun müssen, bevor dieser Code funktioniert, da unsere Funktion `updateElement()` derzeit nur Textinhalte unterstützt. Ändern wir ihren Code ein wenig: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` Wir verwenden die Methode [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append), da sie es ermöglicht, entweder Text oder [DOM-Knoten](https://developer.mozilla.org/docs/Web/API/Node) an ein übergeordnetes Element anzuhängen, was perfekt für all unsere Anwendungsfälle ist. Wenn Sie versuchen, sich mit dem `test`-Konto anzumelden, sollten Sie jetzt eine Transaktionsliste auf dem Dashboard sehen 🎉. --- ## 🚀 Herausforderung Arbeitet zusammen, um die Dashboard-Seite wie eine echte Banking-App aussehen zu lassen. Falls ihr eure App bereits gestaltet habt, versucht [Media Queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) zu verwenden, um ein [responsives Design](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) zu erstellen, das sowohl auf Desktop- als auch auf Mobilgeräten gut funktioniert. Hier ist ein Beispiel für eine gestaltete Dashboard-Seite:  ## Quiz nach der Vorlesung [Quiz nach der Vorlesung](https://ff-quizzes.netlify.app/web/quiz/46) ## Aufgabe [Refaktorieren und kommentieren Sie Ihren Code](assignment.md) **Haftungsausschluss**: Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.