` element na ito ay walang laman, ibig sabihin walang ipapakita sa screen hanggang sa magdagdag tayo ng content dito. Binibigyan din natin ito ng `id` upang madali itong makuha gamit ang JavaScript. Bumalik sa `app.js` file at gumawa ng bagong helper function na `updateElement`: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` Ang function na ito ay medyo simple: binigyan ng element *id* at *text*, ia-update nito ang text content ng DOM element na may katugmang `id`. Gamitin natin ang method na ito kapalit ng naunang error message sa `login` function: ```js if (data.error) { return updateElement('loginError', data.error); } ``` Ngayon, kung susubukan mong mag-login gamit ang invalid na account, makikita mo ang ganito:  Ngayon ay mayroon na tayong error text na lumalabas nang visual, ngunit kung susubukan mo ito gamit ang screen reader, mapapansin mong walang naia-announce. Para sa text na dinamikong idinagdag sa isang page na ma-announce ng screen readers, kailangan itong gumamit ng tinatawag na [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Dito gagamit tayo ng isang partikular na uri ng live region na tinatawag na alert: ```html ``` Ipatupad ang parehong behavior para sa mga error ng `register` function (huwag kalimutang i-update ang HTML). ## Magpakita ng impormasyon sa dashboard Gamit ang parehong mga teknik na nakita natin, aalagaan din natin ang pagpapakita ng impormasyon ng account sa dashboard page. Ganito ang hitsura ng isang account object na natanggap mula sa server: ```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 } ], } ``` > Tandaan: upang gawing mas madali ang iyong buhay, maaari mong gamitin ang pre-existing na `test` account na mayroon nang data. ### Gawain Simulan natin sa pamamagitan ng pagpapalit ng seksyon ng "Balance" sa HTML upang magdagdag ng placeholder elements: ```html

Balance:

``` Magdagdag din tayo ng bagong seksyon sa ibaba upang ipakita ang account description: ```html

``` ✅ Dahil ang account description ay gumagana bilang pamagat para sa nilalaman sa ilalim nito, ito ay minarkahan nang semantically bilang heading. Matuto pa tungkol sa kung paano [heading structure](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) ay mahalaga para sa accessibility, at suriin nang kritikal ang page upang matukoy kung ano pa ang maaaring maging heading. Susunod, gagawa tayo ng bagong function sa `app.js` upang punan ang placeholder: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` Una, tinitiyak natin na mayroon tayong kinakailangang account data bago magpatuloy. Pagkatapos ay ginagamit natin ang `updateElement()` function na ginawa natin kanina upang i-update ang HTML. > Upang gawing mas maganda ang display ng balance, ginagamit natin ang method [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) upang pilitin ang pagpapakita ng value na may 2 digits pagkatapos ng decimal point. Ngayon kailangan nating tawagin ang `updateDashboard()` function tuwing ang dashboard ay na-load. Kung natapos mo na ang [lesson 1 assignment](../1-template-route/assignment.md) ito ay dapat na straightforward, kung hindi maaari mong gamitin ang sumusunod na implementasyon. Idagdag ang code na ito sa dulo ng `updateRoute()` function: ```js if (typeof route.init === 'function') { route.init(); } ``` At i-update ang routes definition gamit: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` Sa pagbabagong ito, tuwing ang dashboard page ay ipinapakita, ang function na `updateDashboard()` ay tinatawag. Pagkatapos ng login, dapat mong makita ang account balance, currency, at description. ## Gumawa ng table rows nang dinamikong gamit ang HTML templates Sa [unang aralin](../1-template-route/README.md) ginamit natin ang HTML templates kasabay ng [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) method upang ipatupad ang navigation sa ating app. Ang templates ay maaari ring mas maliit at magamit upang dinamikong punan ang mga repetitive na bahagi ng isang page. Gagamit tayo ng katulad na approach upang ipakita ang listahan ng mga transactions sa HTML table. ### Gawain Magdagdag ng bagong template sa HTML ``: ```html ``` Ang template na ito ay kumakatawan sa isang single table row, na may 3 columns na nais nating punan: *date*, *object*, at *amount* ng isang transaction. Pagkatapos, idagdag ang property na `id` sa `` element ng table sa loob ng dashboard template upang mas madali itong mahanap gamit ang JavaScript: ```html ``` Handa na ang ating HTML, lumipat tayo sa JavaScript code at gumawa ng bagong function na `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; } ``` Ang function na ito ay eksaktong ginagawa kung ano ang ipinahihiwatig ng pangalan nito: gamit ang template na ginawa natin kanina, ito ay lumilikha ng bagong table row at pinupunan ang nilalaman nito gamit ang transaction data. Gagamitin natin ito sa `updateDashboard()` function upang punan ang table: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` Dito ginagamit natin ang method [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) na lumilikha ng bagong DOM fragment kung saan maaari tayong magtrabaho, bago ito tuluyang i-attach sa ating HTML table. May isa pang bagay na kailangan nating gawin bago gumana ang code na ito, dahil ang ating `updateElement()` function ay kasalukuyang sumusuporta lamang sa text content. Baguhin natin nang kaunti ang code nito: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` Ginagamit namin ang [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) na pamamaraan dahil pinapayagan nitong magdagdag ng teksto o [DOM Nodes](https://developer.mozilla.org/docs/Web/API/Node) sa isang parent element, na perpekto para sa lahat ng aming mga pangangailangan. Kung susubukan mong gamitin ang `test` na account para mag-login, makikita mo na ngayon ang listahan ng mga transaksyon sa dashboard 🎉. --- ## Hamon ng GitHub Copilot Agent 🚀 Gamitin ang Agent mode upang tapusin ang sumusunod na hamon: **Deskripsyon:** Pagandahin ang banking app sa pamamagitan ng pag-implement ng tampok na paghahanap at pag-filter ng transaksyon na magpapahintulot sa mga user na maghanap ng partikular na transaksyon batay sa saklaw ng petsa, halaga, o deskripsyon. **Prompt:** Gumawa ng functionality sa paghahanap para sa banking app na kinabibilangan ng: 1) Isang search form na may input fields para sa saklaw ng petsa (mula/hanggang), minimum/maximum na halaga, at mga keyword sa deskripsyon ng transaksyon, 2) Isang `filterTransactions()` na function na nagfi-filter sa account.transactions array batay sa mga pamantayan sa paghahanap, 3) I-update ang `updateDashboard()` na function upang ipakita ang mga na-filter na resulta, at 4) Magdagdag ng "Clear Filters" na button upang i-reset ang view. Gumamit ng modernong mga pamamaraan ng JavaScript array tulad ng `filter()` at i-handle ang mga edge cases para sa walang laman na pamantayan sa paghahanap. ## 🚀 Hamon Magtulungan upang gawing mukhang tunay na banking app ang dashboard page. Kung na-style mo na ang iyong app, subukang gumamit ng [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) upang lumikha ng [responsive design](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) na maayos na gumagana sa parehong desktop at mobile devices. Narito ang isang halimbawa ng styled dashboard page:  ## Post-Lecture Quiz [Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/46) ## Takdang-Aralin [Refactor at lagyan ng komento ang iyong code](assignment.md) --- **Paunawa**: Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.