` está vacío, lo que significa que no se mostrará nada en la pantalla hasta que le agreguemos contenido. También le damos un `id` para poder recuperarlo fácilmente con JavaScript. Vuelve al archivo `app.js` y crea una nueva función auxiliar `updateElement`: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` Esta es bastante sencilla: dado un *id* de elemento y un *texto*, actualizará el contenido de texto del elemento del DOM con el `id` correspondiente. Usemos este método en lugar del mensaje de error anterior en la función `login`: ```js if (data.error) { return updateElement('loginError', data.error); } ``` Ahora, si intentas iniciar sesión con una cuenta inválida, deberías ver algo como esto:  Ahora tenemos un texto de error que aparece visualmente, pero si lo intentas con un lector de pantalla, notarás que no se anuncia nada. Para que el texto que se agrega dinámicamente a una página sea anunciado por los lectores de pantalla, necesitará usar algo llamado [Región Viva](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Aquí vamos a usar un tipo específico de región viva llamada alerta: ```html ``` Implementa el mismo comportamiento para los errores de la función `register` (no olvides actualizar el HTML). ## Mostrar información en el tablero Usando las mismas técnicas que acabamos de ver, también nos encargaremos de mostrar la información de la cuenta en la página del tablero. Así es como se ve un objeto de cuenta recibido del servidor: ```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: para facilitarte la vida, puedes usar la cuenta `test` preexistente que ya está poblada con datos. ### Tarea Comencemos reemplazando la sección "Balance" en el HTML para agregar elementos de marcador de posición: ```html

Balance:

``` También agregaremos una nueva sección justo debajo para mostrar la descripción de la cuenta: ```html

``` ✅ Dado que la descripción de la cuenta funciona como un título para el contenido debajo de ella, está marcada semánticamente como un encabezado. Aprende más sobre cómo [la estructura de encabezados](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) es importante para la accesibilidad y analiza críticamente la página para determinar qué más podría ser un encabezado. A continuación, crearemos una nueva función en `app.js` para llenar el marcador de posición: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` Primero, verificamos que tenemos los datos de la cuenta que necesitamos antes de continuar. Luego usamos la función `updateElement()` que creamos anteriormente para actualizar el HTML. > Para hacer que la visualización del balance sea más atractiva, usamos el método [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) para forzar la visualización del valor con 2 dígitos después del punto decimal. Ahora necesitamos llamar a nuestra función `updateDashboard()` cada vez que se cargue la página del tablero. Si ya terminaste la [tarea de la lección 1](../1-template-route/assignment.md), esto debería ser sencillo; de lo contrario, puedes usar la siguiente implementación. Agrega este código al final de la función `updateRoute()`: ```js if (typeof route.init === 'function') { route.init(); } ``` Y actualiza la definición de rutas con: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` Con este cambio, cada vez que se muestre la página del tablero, se llamará a la función `updateDashboard()`. Después de un inicio de sesión, deberías poder ver el balance de la cuenta, la moneda y la descripción. ## Crear filas de tabla dinámicamente con plantillas HTML En la [primera lección](../1-template-route/README.md) usamos plantillas HTML junto con el método [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) para implementar la navegación en nuestra aplicación. Las plantillas también pueden ser más pequeñas y usarse para llenar partes repetitivas de una página de manera dinámica. Usaremos un enfoque similar para mostrar la lista de transacciones en la tabla HTML. ### Tarea Agrega una nueva plantilla en el `` del HTML: ```html ``` Esta plantilla representa una sola fila de tabla, con las 3 columnas que queremos llenar: *fecha*, *objeto* y *monto* de una transacción. Luego, agrega esta propiedad `id` al elemento `` de la tabla dentro de la plantilla del tablero para que sea más fácil de encontrar usando JavaScript: ```html ``` Nuestro HTML está listo, pasemos al código JavaScript y creemos una nueva función `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; } ``` Esta función hace exactamente lo que su nombre implica: usando la plantilla que creamos anteriormente, crea una nueva fila de tabla y llena su contenido usando los datos de la transacción. Usaremos esto en nuestra función `updateDashboard()` para llenar la tabla: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` Aquí usamos el método [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) que crea un nuevo fragmento del DOM en el que podemos trabajar, antes de finalmente adjuntarlo a nuestra tabla HTML. Todavía hay una cosa más que debemos hacer antes de que este código funcione, ya que nuestra función `updateElement()` actualmente solo soporta contenido de texto. Cambiemos su código un poco: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` Usamos el método [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) ya que permite adjuntar texto o [Nodos del DOM](https://developer.mozilla.org/docs/Web/API/Node) a un elemento padre, lo cual es perfecto para todos nuestros casos de uso. Si intentas usar la cuenta `test` para iniciar sesión, ahora deberías ver una lista de transacciones en el panel de control 🎉. --- ## 🚀 Desafío Trabajen juntos para hacer que la página del panel de control se parezca a una aplicación bancaria real. Si ya has estilizado tu aplicación, intenta usar [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) para crear un [diseño responsivo](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) que funcione bien tanto en dispositivos de escritorio como en móviles. Aquí tienes un ejemplo de una página de panel de control estilizada:  ## Cuestionario posterior a la clase [Cuestionario posterior a la clase](https://ff-quizzes.netlify.app/web/quiz/46) ## Tarea [Refactoriza y comenta tu código](assignment.md) **Descargo de responsabilidad**: Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Si bien nos esforzamos por lograr precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.