`-element är tomt, vilket innebär att inget kommer att visas på skärmen förrän vi lägger till något innehåll i det. Vi ger det också ett `id` så att vi enkelt kan hämta det med JavaScript. Gå tillbaka till filen `app.js` och skapa en ny hjälpfunktion `updateElement`: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` Den här är ganska enkel: givet ett element-*id* och *text* kommer den att uppdatera textinnehållet i DOM-elementet med det matchande `id`. Låt oss använda denna metod istället för det tidigare felmeddelandet i `login`-funktionen: ```js if (data.error) { return updateElement('loginError', data.error); } ``` Nu, om du försöker logga in med ett ogiltigt konto, bör du se något som detta:  Nu har vi ett felmeddelande som visas visuellt, men om du testar det med en skärmläsare kommer du att märka att inget meddelas. För att text som läggs till dynamiskt på en sida ska meddelas av skärmläsare måste den använda något som kallas en [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Här ska vi använda en specifik typ av live-region som kallas en alert: ```html ``` Implementera samma beteende för fel i `register`-funktionen (glöm inte att uppdatera HTML). ## Visa information på instrumentpanelen Med hjälp av samma tekniker som vi just har sett ska vi också ta hand om att visa kontoinformationen på instrumentpanelsidan. Så här ser ett kontoobjekt som tas emot från servern ut: ```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 } ], } ``` > Obs: för att göra ditt liv enklare kan du använda det fördefinierade kontot `test` som redan är fyllt med data. ### Uppgift Låt oss börja med att ersätta avsnittet "Balance" i HTML för att lägga till platshållarelement: ```html

Balance:

``` Vi lägger också till ett nytt avsnitt precis nedanför för att visa kontobeskrivningen: ```html

``` ✅ Eftersom kontobeskrivningen fungerar som en titel för innehållet under den, är den semantiskt markerad som en rubrik. Lär dig mer om hur [rubrikstruktur](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) är viktig för tillgänglighet och granska sidan kritiskt för att avgöra vad mer som kan vara en rubrik. Nästa steg är att skapa en ny funktion i `app.js` för att fylla i platshållaren: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` Först kontrollerar vi att vi har de kontodata vi behöver innan vi går vidare. Sedan använder vi funktionen `updateElement()` som vi skapade tidigare för att uppdatera HTML. > För att göra saldodisplayen snyggare använder vi metoden [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) för att tvinga fram visning av värdet med 2 decimaler. Nu behöver vi anropa vår `updateDashboard()`-funktion varje gång instrumentpanelen laddas. Om du redan har slutfört [uppgiften i lektion 1](../1-template-route/assignment.md) bör detta vara enkelt, annars kan du använda följande implementation. Lägg till denna kod i slutet av funktionen `updateRoute()`: ```js if (typeof route.init === 'function') { route.init(); } ``` Och uppdatera ruttdefinitionerna med: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` Med denna ändring kommer funktionen `updateDashboard()` att anropas varje gång instrumentpanelsidan visas. Efter en inloggning bör du då kunna se kontosaldot, valutan och beskrivningen. ## Skapa tabellrader dynamiskt med HTML-mallar I [den första lektionen](../1-template-route/README.md) använde vi HTML-mallar tillsammans med metoden [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) för att implementera navigeringen i vår app. Mallar kan också vara mindre och användas för att dynamiskt fylla repetitiva delar av en sida. Vi kommer att använda ett liknande tillvägagångssätt för att visa listan över transaktioner i HTML-tabellen. ### Uppgift Lägg till en ny mall i HTML-``: ```html ``` Denna mall representerar en enda tabellrad med de tre kolumner vi vill fylla: *datum*, *objekt* och *belopp* för en transaktion. Lägg sedan till denna `id`-egenskap i ``-elementet i tabellen inom instrumentpanelsmallen för att göra det enklare att hitta med JavaScript: ```html ``` Vår HTML är redo, låt oss byta till JavaScript-kod och skapa en ny funktion `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; } ``` Denna funktion gör precis vad dess namn antyder: med hjälp av mallen vi skapade tidigare skapar den en ny tabellrad och fyller dess innehåll med transaktionsdata. Vi kommer att använda detta i vår `updateDashboard()`-funktion för att fylla tabellen: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` Här använder vi metoden [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) som skapar ett nytt DOM-fragment som vi kan arbeta med innan vi slutligen fäster det i vår HTML-tabell. Det finns fortfarande en sak vi måste göra innan denna kod kan fungera, eftersom vår `updateElement()`-funktion för närvarande bara stöder textinnehåll. Låt oss ändra dess kod lite: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` Vi använder metoden [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) eftersom den tillåter att fästa antingen text eller [DOM-noder](https://developer.mozilla.org/docs/Web/API/Node) till ett överordnat element, vilket är perfekt för alla våra användningsfall. Om du försöker använda `test`-kontot för att logga in, bör du nu se en transaktionslista på instrumentpanelen 🎉. --- ## 🚀 Utmaning Arbeta tillsammans för att få instrumentpanelsidan att se ut som en riktig bankapp. Om du redan har stylat din app, försök använda [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) för att skapa en [responsiv design](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) som fungerar bra både på stationära och mobila enheter. Här är ett exempel på en stylad instrumentpanelsida:  ## Quiz efter föreläsningen [Quiz efter föreläsningen](https://ff-quizzes.netlify.app/web/quiz/46) ## Uppgift [Refaktorisera och kommentera din kod](assignment.md) --- **Ansvarsfriskrivning**: Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, vänligen notera att automatiska översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess originalspråk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.