` est vide, ce qui signifie que rien ne sera affiché à l'écran tant que nous n'y ajouterons pas de contenu. Nous lui donnons également un `id` pour pouvoir le récupérer facilement avec JavaScript. Retournez dans le fichier `app.js` et créez une nouvelle fonction utilitaire `updateElement` : ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` Celle-ci est assez simple : étant donné un *id* d'élément et un *texte*, elle mettra à jour le contenu texte de l'élément DOM correspondant à cet `id`. Utilisons cette méthode à la place du précédent message d'erreur dans la fonction `login` : ```js if (data.error) { return updateElement('loginError', data.error); } ``` Maintenant, si vous essayez de vous connecter avec un compte invalide, vous devriez voir quelque chose comme ceci :  Nous avons maintenant un texte d'erreur qui s'affiche visuellement, mais si vous essayez avec un lecteur d'écran, vous remarquerez que rien n'est annoncé. Pour que le texte ajouté dynamiquement à une page soit annoncé par les lecteurs d'écran, il devra utiliser quelque chose appelé une [Région Active (Live Region)](https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Ici, nous allons utiliser un type spécifique de région active appelé une alerte : ```html ``` Implémentez le même comportement pour les erreurs de la fonction `register` (n'oubliez pas de mettre à jour le HTML). ## Afficher les informations sur le tableau de bord En utilisant les mêmes techniques que nous venons de voir, nous allons également nous occuper d'afficher les informations du compte sur la page du tableau de bord. Voici à quoi ressemble un objet compte reçu du serveur : ```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 } ], } ``` > Remarque : pour vous faciliter la tâche, vous pouvez utiliser le compte `test` préexistant qui est déjà rempli avec des données. ### Tâche Commençons par remplacer la section "Balance" dans le HTML pour ajouter des éléments de type placeholder : ```html

Balance:

``` Nous ajouterons également une nouvelle section juste en dessous pour afficher la description du compte : ```html

``` ✅ Comme la description du compte fonctionne comme un titre pour le contenu en dessous, elle est balisée sémantiquement comme un titre. Apprenez-en davantage sur l'importance de la [structure des titres](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) pour l'accessibilité, et examinez attentivement la page pour déterminer ce qui pourrait également être un titre. Ensuite, nous allons créer une nouvelle fonction dans `app.js` pour remplir le placeholder : ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` Tout d'abord, nous vérifions que nous avons les données du compte nécessaires avant d'aller plus loin. Ensuite, nous utilisons la fonction `updateElement()` que nous avons créée plus tôt pour mettre à jour le HTML. > Pour rendre l'affichage du solde plus joli, nous utilisons la méthode [`toFixed(2)`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) pour forcer l'affichage de la valeur avec 2 chiffres après la virgule. Nous devons maintenant appeler notre fonction `updateDashboard()` chaque fois que la page du tableau de bord est chargée. Si vous avez déjà terminé l'[exercice de la leçon 1](../1-template-route/assignment.md), cela devrait être simple, sinon vous pouvez utiliser l'implémentation suivante. Ajoutez ce code à la fin de la fonction `updateRoute()` : ```js if (typeof route.init === 'function') { route.init(); } ``` Et mettez à jour la définition des routes avec : ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` Avec ce changement, chaque fois que la page du tableau de bord est affichée, la fonction `updateDashboard()` est appelée. Après une connexion, vous devriez alors pouvoir voir le solde du compte, la devise et la description. ## Créer dynamiquement des lignes de tableau avec des modèles HTML Dans la [première leçon](../1-template-route/README.md), nous avons utilisé des modèles HTML avec la méthode [`appendChild()`](https://developer.mozilla.org/fr/docs/Web/API/Node/appendChild) pour implémenter la navigation dans notre application. Les modèles peuvent également être plus petits et utilisés pour remplir dynamiquement des parties répétitives d'une page. Nous allons utiliser une approche similaire pour afficher la liste des transactions dans le tableau HTML. ### Tâche Ajoutez un nouveau modèle dans le `` du HTML : ```html ``` Ce modèle représente une seule ligne de tableau, avec les 3 colonnes que nous voulons remplir : *date*, *objet* et *montant* d'une transaction. Ensuite, ajoutez cette propriété `id` à l'élément `` du tableau dans le modèle du tableau de bord pour le rendre plus facile à trouver avec JavaScript : ```html ``` Notre HTML est prêt, passons au code JavaScript et créons une nouvelle fonction `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; } ``` Cette fonction fait exactement ce que son nom implique : en utilisant le modèle que nous avons créé plus tôt, elle crée une nouvelle ligne de tableau et remplit son contenu avec les données de la transaction. Nous utiliserons cela dans notre fonction `updateDashboard()` pour remplir le tableau : ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` Ici, nous utilisons la méthode [`document.createDocumentFragment()`](https://developer.mozilla.org/fr/docs/Web/API/Document/createDocumentFragment) qui crée un nouveau fragment DOM sur lequel nous pouvons travailler, avant de l'attacher finalement à notre tableau HTML. Il reste encore une chose à faire avant que ce code puisse fonctionner, car notre fonction `updateElement()` prend actuellement en charge uniquement le contenu texte. Modifions un peu son code : ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` Nous utilisons la méthode [`append()`](https://developer.mozilla.org/fr/docs/Web/API/ParentNode/append) car elle permet d'attacher soit du texte, soit des [nœuds DOM](https://developer.mozilla.org/fr/docs/Web/API/Node) à un élément parent, ce qui est parfait pour tous nos cas d'utilisation. Si vous essayez de vous connecter avec le compte `test`, vous devriez maintenant voir une liste de transactions sur le tableau de bord 🎉. --- ## 🚀 Défi Travaillez ensemble pour faire en sorte que la page du tableau de bord ressemble à une véritable application bancaire. Si vous avez déjà stylisé votre application, essayez d'utiliser des [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) pour créer un [design responsive](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) qui fonctionne bien à la fois sur les appareils de bureau et mobiles. Voici un exemple de page de tableau de bord stylisée :  ## Quiz après le cours [Quiz après le cours](https://ff-quizzes.netlify.app/web/quiz/46) ## Devoir [Refactorisez et commentez votre code](assignment.md) --- **Avertissement** : Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de faire appel à une traduction humaine professionnelle. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction.