` 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 było 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; } ``` Funkcja ta 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ę na nieprawidłowe konto, powinieneś zobaczyć coś takiego:  Teraz mamy tekst błędu, który pojawia się wizualnie, ale jeśli spróbujesz go z czytnikiem ekranu, zauważysz, że nic nie jest ogłaszane. Aby tekst dynamicznie dodawany do strony był ogłaszany przez czytniki ekranu, musi używać czegoś, co nazywa się [regionem na żywo (Live Region)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Tutaj użyjemy konkretnego typu regionu na żywo, zwanego alertem: ```html ``` Zaimplementuj to samo zachowanie dla błędów funkcji `register` (nie zapomnij zaktualizować HTML). ## Wyświetlanie informacji na pulpicie 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. 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 "Saldo" 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 treś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 krytycznie przyjrzyj się 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 przejdziemy dalej. Następnie używamy funkcji `updateElement()`, którą stworzyliśmy wcześniej, aby zaktualizować HTML. > Aby saldo wyglądało ładniej, 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 miejscami po przecinku. Teraz musimy wywołać naszą funkcję `updateDashboard()` za każdym razem, gdy ładowany jest pulpit. Jeśli ukończyłeś już [zadanie z lekcji 1](../1-template-route/assignment.md), powinno to być proste, w przeciwnym razie możesz użyć poniższej 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, wywoływana jest funkcja `updateDashboard()`. Po zalogowaniu powinieneś być w stanie zobaczyć saldo konta, walutę i opis. ## Dynamiczne tworzenie wierszy tabeli 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, aby łatwiej było 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; } ``` Funkcja ta robi dokładnie to, co sugeruje jej nazwa: korzystając z wcześniej utworzonego szablonu, tworzy nowy wiersz tabeli i wypełnia jego zawartość danymi transakcji. Użyjemy jej 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. Jest 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 dołączać zarówno tekst, jak i [węzły 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ę na konto `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łumaczeniowej 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 języku źródłowym powinien być uznawany za wiarygodne ź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.