` è vuoto, il che significa che nulla verrà mostrato sullo schermo finché non aggiungiamo del contenuto. Gli diamo anche un `id` in modo da poterlo recuperare facilmente con JavaScript. Torna al file `app.js` e crea una nuova funzione helper `updateElement`: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` Questa è piuttosto semplice: dato un *id* di un elemento e un *testo*, aggiornerà il contenuto testuale dell'elemento DOM con l'`id` corrispondente. Usiamo questo metodo al posto del precedente messaggio di errore nella funzione `login`: ```js if (data.error) { return updateElement('loginError', data.error); } ``` Ora, se provi ad accedere con un account non valido, dovresti vedere qualcosa del genere:  Ora abbiamo un testo di errore che appare visivamente, ma se lo provi con un lettore di schermo noterai che non viene annunciato nulla. Per fare in modo che il testo aggiunto dinamicamente a una pagina venga annunciato dai lettori di schermo, sarà necessario utilizzare qualcosa chiamato [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Qui utilizzeremo un tipo specifico di live region chiamato alert: ```html ``` Implementa lo stesso comportamento per gli errori della funzione `register` (non dimenticare di aggiornare l'HTML). ## Mostrare informazioni nel dashboard Utilizzando le stesse tecniche appena viste, ci occuperemo anche di mostrare le informazioni dell'account nella pagina del dashboard. Questo è come appare un oggetto account ricevuto dal server: ```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 } ], } ``` > Nota: per semplificarti la vita, puoi utilizzare l'account `test` preesistente che è già popolato con dati. ### Compito Iniziamo sostituendo la sezione "Saldo" nell'HTML per aggiungere elementi segnaposto: ```html

Balance:

``` Aggiungeremo anche una nuova sezione appena sotto per mostrare la descrizione dell'account: ```html

``` ✅ Poiché la descrizione dell'account funziona come un titolo per il contenuto sottostante, è marcata semanticamente come un'intestazione. Scopri di più su come [la struttura delle intestazioni](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) sia importante per l'accessibilità e osserva criticamente la pagina per determinare cos'altro potrebbe essere un'intestazione. Successivamente, creeremo una nuova funzione in `app.js` per riempire i segnaposto: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` Per prima cosa, verifichiamo di avere i dati dell'account necessari prima di procedere. Poi utilizziamo la funzione `updateElement()` che abbiamo creato in precedenza per aggiornare l'HTML. > Per rendere la visualizzazione del saldo più gradevole, utilizziamo il metodo [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) per forzare la visualizzazione del valore con 2 cifre decimali. Ora dobbiamo chiamare la nostra funzione `updateDashboard()` ogni volta che il dashboard viene caricato. Se hai già completato l'[esercizio della lezione 1](../1-template-route/assignment.md), questo dovrebbe essere semplice, altrimenti puoi utilizzare la seguente implementazione. Aggiungi questo codice alla fine della funzione `updateRoute()`: ```js if (typeof route.init === 'function') { route.init(); } ``` E aggiorna la definizione delle rotte con: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` Con questa modifica, ogni volta che la pagina del dashboard viene mostrata, viene chiamata la funzione `updateDashboard()`. Dopo un login, dovresti quindi essere in grado di vedere il saldo dell'account, la valuta e la descrizione. ## Creare righe di tabella dinamicamente con template HTML Nella [prima lezione](../1-template-route/README.md) abbiamo utilizzato template HTML insieme al metodo [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) per implementare la navigazione nella nostra app. I template possono anche essere più piccoli e utilizzati per popolare dinamicamente parti ripetitive di una pagina. Utilizzeremo un approccio simile per mostrare l'elenco delle transazioni nella tabella HTML. ### Compito Aggiungi un nuovo template nel `` dell'HTML: ```html ``` Questo template rappresenta una singola riga di tabella, con le 3 colonne che vogliamo popolare: *data*, *oggetto* e *importo* di una transazione. Poi, aggiungi questa proprietà `id` all'elemento `` della tabella all'interno del template del dashboard per renderlo più facile da trovare utilizzando JavaScript: ```html ``` Il nostro HTML è pronto, passiamo al codice JavaScript e creiamo una nuova funzione `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; } ``` Questa funzione fa esattamente ciò che il suo nome implica: utilizzando il template che abbiamo creato prima, crea una nuova riga di tabella e ne riempie i contenuti utilizzando i dati della transazione. La utilizzeremo nella nostra funzione `updateDashboard()` per popolare la tabella: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` Qui utilizziamo il metodo [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) che crea un nuovo frammento DOM su cui possiamo lavorare, prima di attaccarlo finalmente alla nostra tabella HTML. C'è ancora una cosa che dobbiamo fare prima che questo codice possa funzionare, poiché la nostra funzione `updateElement()` attualmente supporta solo contenuti testuali. Cambiamo un po' il suo codice: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` Utilizziamo il metodo [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) poiché consente di allegare sia testo che [nodi DOM](https://developer.mozilla.org/docs/Web/API/Node) a un elemento genitore, perfetto per tutti i nostri casi d'uso. Se provi a utilizzare l'account `test` per accedere, ora dovresti vedere un elenco di transazioni nella dashboard 🎉. --- ## 🚀 Sfida Collaborate per far sì che la pagina della dashboard sembri una vera app bancaria. Se avete già stilizzato la vostra app, provate a utilizzare [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) per creare un [design responsivo](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) che funzioni bene sia su dispositivi desktop che mobili. Ecco un esempio di una pagina dashboard stilizzata:  ## Quiz post-lezione [Quiz post-lezione](https://ff-quizzes.netlify.app/web/quiz/46) ## Compito [Refattorizza e commenta il tuo codice](assignment.md) **Disclaimer**: Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale effettuata da un traduttore umano. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.