`-element er tomt, hvilket betyder, at der ikke vises noget på skærmen, før vi tilføjer noget indhold til det. Vi giver det også et `id`, så vi nemt kan hente det med JavaScript. Gå tilbage til filen `app.js` og opret en ny hjælpefunktion `updateElement`: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` Denne er ret ligetil: givet et element-*id* og *tekst*, vil den opdatere tekstindholdet i DOM-elementet med det matchende `id`. Lad os bruge denne metode i stedet for den tidligere fejlmeddelelse i `login`-funktionen: ```js if (data.error) { return updateElement('loginError', data.error); } ``` Nu, hvis du forsøger at logge ind med en ugyldig konto, bør du se noget som dette:  Nu har vi en fejltekst, der vises visuelt, men hvis du prøver det med en skærmlæser, vil du bemærke, at der ikke bliver annonceret noget. For at tekst, der dynamisk tilføjes til en side, kan blive annonceret af skærmlæsere, skal den bruge noget, der kaldes en [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Her vil vi bruge en specifik type live region kaldet en alert: ```html ``` Implementer den samme adfærd for fejl i `register`-funktionen (husk at opdatere HTML'en). ## Vis information på dashboardet Ved hjælp af de samme teknikker, vi lige har set, vil vi også tage os af at vise kontoinformationen på dashboard-siden. Sådan ser et kontoobjekt modtaget fra serveren ud: ```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 } ], } ``` > Bemærk: for at gøre dit liv lettere kan du bruge den foruddefinerede `test`-konto, der allerede er fyldt med data. ### Opgave Lad os starte med at erstatte sektionen "Balance" i HTML for at tilføje pladsholderelementer: ```html

Balance:

``` Vi tilføjer også en ny sektion lige nedenunder for at vise kontobeskrivelsen: ```html

``` ✅ Da kontobeskrivelsen fungerer som en titel for indholdet nedenunder, er den semantisk markeret som en overskrift. Lær mere om, hvordan [overskriftsstruktur](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) er vigtig for tilgængelighed, og tag et kritisk kig på siden for at afgøre, hvad der ellers kunne være en overskrift. Derefter opretter vi en ny funktion i `app.js` for at udfylde pladsholderen: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` Først tjekker vi, at vi har de kontodata, vi har brug for, før vi går videre. Derefter bruger vi funktionen `updateElement()`, som vi oprettede tidligere, til at opdatere HTML'en. > For at gøre balancevisningen pænere bruger vi metoden [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) for at sikre, at værdien vises med 2 decimaler. Nu skal vi kalde vores `updateDashboard()`-funktion hver gang dashboardet indlæses. Hvis du allerede har afsluttet [lektion 1-opgaven](../1-template-route/assignment.md), bør dette være ligetil, ellers kan du bruge følgende implementering. Tilføj denne kode til slutningen af funktionen `updateRoute()`: ```js if (typeof route.init === 'function') { route.init(); } ``` Og opdater rute-definitionerne med: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` Med denne ændring kaldes funktionen `updateDashboard()` hver gang dashboard-siden vises. Efter login bør du derefter kunne se kontobalancen, valutaen og beskrivelsen. ## Opret tabelrækker dynamisk med HTML-skabeloner I [den første lektion](../1-template-route/README.md) brugte vi HTML-skabeloner sammen med metoden [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) til at implementere navigationen i vores app. Skabeloner kan også være mindre og bruges til dynamisk at udfylde gentagne dele af en side. Vi vil bruge en lignende tilgang til at vise listen over transaktioner i HTML-tabellen. ### Opgave Tilføj en ny skabelon i HTML-``: ```html ``` Denne skabelon repræsenterer en enkelt tabelrække med de 3 kolonner, vi vil udfylde: *dato*, *objekt* og *beløb* for en transaktion. Tilføj derefter denne `id`-egenskab til ``-elementet i tabellen inden for dashboard-skabelonen for at gøre det lettere at finde med JavaScript: ```html ``` Vores HTML er klar, lad os skifte til JavaScript-kode og oprette 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; } ``` Denne funktion gør præcis, hvad dens navn antyder: ved hjælp af skabelonen, vi oprettede tidligere, opretter den en ny tabelrække og udfylder dens indhold med transaktionsdata. Vi vil bruge denne i vores `updateDashboard()`-funktion til at udfylde tabellen: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` Her bruger vi metoden [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment), der opretter et nyt DOM-fragment, som vi kan arbejde på, før vi endelig vedhæfter det til vores HTML-tabel. Der er stadig én ting, vi skal gøre, før denne kode kan fungere, da vores `updateElement()`-funktion i øjeblikket kun understøtter tekstindhold. Lad os ændre dens kode en smule: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` Vi bruger metoden [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append), da den gør det muligt at vedhæfte enten tekst eller [DOM Nodes](https://developer.mozilla.org/docs/Web/API/Node) til et overordnet element, hvilket er perfekt til alle vores anvendelser. Hvis du prøver at bruge `test`-kontoen til at logge ind, bør du nu se en transaktionsliste på dashboardet 🎉. --- ## 🚀 Udfordring Arbejd sammen om at få dashboard-siden til at ligne en rigtig bankapp. Hvis du allerede har stylet din app, så prøv at bruge [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) til at skabe et [responsivt design](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks), der fungerer godt både på desktop og mobile enheder. Her er et eksempel på en stylet dashboard-side:  ## Quiz efter forelæsning [Quiz efter forelæsning](https://ff-quizzes.netlify.app/web/quiz/46) ## Opgave [Refaktorer og kommenter din kode](assignment.md) --- **Ansvarsfraskrivelse**: Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på at sikre nøjagtighed, skal det bemærkes, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os ikke ansvar for eventuelle misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.