` jest pusty, co oznacza, że nic nie będzie wyświetlane na ekranie, dopóki nie dodamy do niego jakiejś zawartości. Nadajemy mu również `id`, aby łatwo go pobrać za pomocą JavaScript. Wróć do pliku `app.js` i utwórz nową funkcję pomocniczą `updateElement`: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` Ta funkcja jest dość prosta: podając *id* elementu i *tekst*, aktualizuje zawartość tekstową elementu DOM o pasującym `id`. Użyjmy tej metody zamiast poprzedniego komunikatu o błędzie w funkcji `login`: ```js if (data.error) { return updateElement('loginError', data.error); } ``` Teraz, jeśli spróbujesz zalogować się z nieprawidłowym kontem, powinieneś zobaczyć coś takiego:  Teraz mamy tekst błędu, który pojawia się wizualnie, ale jeśli spróbujesz go użyć z czytnikiem ekranu, zauważysz, że nic nie jest ogłaszane. Aby tekst, który jest dynamicznie dodawany do strony, był ogłaszany przez czytniki ekranu, musi używać czegoś, co nazywa się [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Tutaj użyjemy konkretnego typu live regionu, zwanego alertem: ```html ``` Zaimplementuj takie samo zachowanie dla błędów funkcji `register` (nie zapomnij zaktualizować HTML). ## Wyświetlanie informacji na pulpicie nawigacyjnym Korzystając z tych samych technik, które właśnie omówiliśmy, zajmiemy się również wyświetlaniem informacji o koncie na stronie pulpitu nawigacyjnego. Tak wygląda obiekt konta otrzymany z serwera: ```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 } ], } ``` > Uwaga: aby ułatwić sobie życie, możesz użyć istniejącego konta `test`, które jest już wypełnione danymi. ### Zadanie Zacznijmy od zastąpienia sekcji "Balance" w HTML, dodając elementy zastępcze: ```html

Balance:

``` Dodamy również nową sekcję tuż poniżej, aby wyświetlić opis konta: ```html

``` ✅ Ponieważ opis konta pełni funkcję tytułu dla zawartości poniżej, jest oznaczony semantycznie jako nagłówek. Dowiedz się więcej o tym, jak [struktura nagłówków](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) jest ważna dla dostępności, i przyjrzyj się krytycznie stronie, aby określić, co jeszcze mogłoby być nagłówkiem. Następnie utworzymy nową funkcję w `app.js`, aby wypełnić elementy zastępcze: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` Najpierw sprawdzamy, czy mamy potrzebne dane konta, zanim pójdziemy dalej. Następnie używamy funkcji `updateElement()`, którą stworzyliśmy wcześniej, aby zaktualizować HTML. > Aby wyświetlanie salda było bardziej estetyczne, używamy metody [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed), aby wymusić wyświetlanie wartości z 2 cyframi po przecinku. Teraz musimy wywołać naszą funkcję `updateDashboard()` za każdym razem, gdy pulpit nawigacyjny jest ładowany. Jeśli już ukończyłeś [zadanie z lekcji 1](../1-template-route/assignment.md), powinno to być proste, w przeciwnym razie możesz użyć następującej implementacji. Dodaj ten kod na końcu funkcji `updateRoute()`: ```js if (typeof route.init === 'function') { route.init(); } ``` I zaktualizuj definicję tras za pomocą: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` Dzięki tej zmianie za każdym razem, gdy wyświetlana jest strona pulpitu nawigacyjnego, wywoływana jest funkcja `updateDashboard()`. Po zalogowaniu powinieneś być w stanie zobaczyć saldo konta, walutę i opis. ## Tworzenie wierszy tabeli dynamicznie za pomocą szablonów HTML W [pierwszej lekcji](../1-template-route/README.md) użyliśmy szablonów HTML wraz z metodą [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild), aby zaimplementować nawigację w naszej aplikacji. Szablony mogą być również mniejsze i używane do dynamicznego wypełniania powtarzających się części strony. Użyjemy podobnego podejścia, aby wyświetlić listę transakcji w tabeli HTML. ### Zadanie Dodaj nowy szablon w `` HTML: ```html ``` Ten szablon reprezentuje pojedynczy wiersz tabeli z 3 kolumnami, które chcemy wypełnić: *data*, *obiekt* i *kwota* transakcji. Następnie dodaj tę właściwość `id` do elementu `` tabeli w szablonie pulpitu nawigacyjnego, aby łatwiej go znaleźć za pomocą JavaScript: ```html ``` Nasz HTML jest gotowy, przejdźmy do kodu JavaScript i utwórzmy nową funkcję `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; } ``` Ta funkcja robi dokładnie to, co sugeruje jej nazwa: korzystając z szablonu, który stworzyliśmy wcześniej, tworzy nowy wiersz tabeli i wypełnia jego zawartość danymi transakcji. Użyjemy tego w naszej funkcji `updateDashboard()`, aby wypełnić tabelę: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` Tutaj używamy metody [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment), która tworzy nowy fragment DOM, na którym możemy pracować, zanim ostatecznie dołączymy go do naszej tabeli HTML. Pozostała jeszcze jedna rzecz, którą musimy zrobić, zanim ten kod zacznie działać, ponieważ nasza funkcja `updateElement()` obecnie obsługuje tylko zawartość tekstową. Zmieńmy jej kod nieco: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` Używamy metody [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append), ponieważ pozwala ona na dołączanie zarówno tekstu, jak i [węzłów DOM](https://developer.mozilla.org/docs/Web/API/Node) do elementu nadrzędnego, co idealnie pasuje do wszystkich naszych przypadków użycia. Jeśli spróbujesz zalogować się za pomocą konta `test`, powinieneś teraz zobaczyć listę transakcji na pulpicie 🎉. --- ## 🚀 Wyzwanie Wspólnie sprawcie, aby strona pulpitu wyglądała jak prawdziwa aplikacja bankowa. Jeśli już wystylizowaliście swoją aplikację, spróbujcie użyć [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries), aby stworzyć [responsywny design](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks), który dobrze działa zarówno na urządzeniach stacjonarnych, jak i mobilnych. Oto przykład wystylizowanej strony pulpitu:  ## Quiz po wykładzie [Quiz po wykładzie](https://ff-quizzes.netlify.app/web/quiz/46) ## Zadanie [Refaktoryzuj i skomentuj swój kod](assignment.md) **Zastrzeżenie**: Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż dokładamy wszelkich starań, aby tłumaczenie było precyzyjne, prosimy pamiętać, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego rodzimym języku powinien być uznawany za autorytatywne źródło. W przypadku informacji o kluczowym znaczeniu zaleca się skorzystanie z profesjonalnego tłumaczenia przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z użycia tego tłumaczenia.