` è vuoto, il che significa che nulla verrà mostrato sullo schermo fino a quando non aggiungiamo del contenuto. Gli diamo anche un `id` per 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 funzione è piuttosto semplice: dato un *id* dell'elemento e un *testo*, aggiornerà il contenuto testuale dell'elemento DOM con l'`id` corrispondente. Utilizziamo questo metodo al posto del precedente messaggio di errore nella funzione `login`: ```js if (data.error) { return updateElement('loginError', data.error); } ``` Ora, se provi a effettuare il login 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 nulla viene annunciato. 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 sulla dashboard Utilizzando le stesse tecniche appena viste, ci occuperemo anche di mostrare le informazioni dell'account sulla pagina della dashboard. Questo è l'aspetto di 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, è contrassegnata semanticamente come 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 il 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 la dashboard viene caricata. Se hai già completato l'[assegnazione 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 della 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 della 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 della 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 della 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 della tabella e ne riempie i contenuti utilizzando i dati della transazione. Utilizzeremo questa funzione nella nostra `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 allegarlo 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. Modifichiamo 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 padre, 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 hai già stilizzato la tua app, prova 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 consiglia una traduzione professionale eseguita da un traduttore umano. Non siamo responsabili per eventuali fraintendimenti o interpretazioni errate derivanti dall'uso di questa traduzione.