` element is empty, so nothing will appear on the screen until we add content to it. We also assign it an `id` to make it easy to retrieve with JavaScript. Go back to the `app.js` file and create a helper function called `updateElement`: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` This function is straightforward: given an element *id* and *text*, it updates the text content of the DOM element with the matching `id`. Let’s use this function to replace the previous error message in the `login` function: ```js if (data.error) { return updateElement('loginError', data.error); } ``` Now, if you try to log in with an invalid account, you should see something like this:  While the error message is now visible, screen readers won’t announce it. To make dynamically added text accessible to screen readers, we need to use a [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Here, we’ll use a specific type of live region called an alert: ```html ``` Apply the same behavior to the `register` function errors (and don’t forget to update the HTML). ## Display Information on the Dashboard Using the techniques we’ve just learned, we’ll now display the account information on the dashboard page. Here’s an example of what an account object received from the server looks like: ```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 } ], } ``` > Note: To make testing easier, you can use the pre-existing `test` account, which already contains data. ### Task Let’s start by modifying the "Balance" section in the HTML to include placeholder elements: ```html

Balance:

``` We’ll also add a new section below to display the account description: ```html

``` ✅ Since the account description serves as a title for the content below it, it’s marked up semantically as a heading. Learn more about the importance of [heading structure](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) for accessibility, and review the page to identify other potential headings. Next, we’ll create a new function in `app.js` to populate the placeholders: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` First, we ensure that the account data is available before proceeding. Then, we use the `updateElement()` function we created earlier to update the HTML. > To make the balance display more user-friendly, we use the [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) method to ensure the value is displayed with two decimal places. Now, we need to call the `updateDashboard()` function whenever the dashboard is loaded. If you’ve already completed the [lesson 1 assignment](../1-template-route/assignment.md), this should be straightforward. Otherwise, you can use the following implementation. Add this code to the end of the `updateRoute()` function: ```js if (typeof route.init === 'function') { route.init(); } ``` And update the route definitions with: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` With this change, the `updateDashboard()` function will be called every time the dashboard page is displayed. After logging in, you should see the account balance, currency, and description. ## Create Table Rows Dynamically with HTML Templates In [lesson 1](../1-template-route/README.md), we used HTML templates along with the [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) method to implement navigation in our app. Templates can also be used for smaller, repetitive parts of a page. We’ll use a similar approach to display the list of transactions in the HTML table. ### Task Add a new template to the HTML ``: ```html ``` This template represents a single table row with three columns: *date*, *object*, and *amount* of a transaction. Next, add an `id` property to the `` element of the table in the dashboard template to make it easier to find with JavaScript: ```html ``` Now that the HTML is ready, let’s switch to JavaScript and create a new function called `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; } ``` This function does exactly what its name suggests: it uses the template we created earlier to generate a new table row and fills in its contents with transaction data. We’ll use this function in `updateDashboard()` to populate the table: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` Here, we use the [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) method to create a new DOM fragment. This allows us to work on the fragment before attaching it to the HTML table. Finally, we need to update the `updateElement()` function to support more than just text content. Modify its code as follows: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` We use the [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) method, which allows us to attach either text or [DOM Nodes](https://developer.mozilla.org/docs/Web/API/Node) to a parent element. This makes it versatile for all our use cases. If you try using the `test` account to log in, you should now see a transaction list on the dashboard 🎉. --- ## 🚀 Challenge Work together to make the dashboard page look like a real banking app. If you've already styled your app, try using [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) to create a [responsive design](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) that works well on both desktop and mobile devices. Here's an example of a styled dashboard page:  ## Post-Lecture Quiz [Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/46) ## Assignment [Refactor and comment your code](assignment.md) --- **Disclaimer**: This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.