` तत्व खाली छ, जसको अर्थ स्क्रीनमा केही देखाइने छैन जबसम्म हामीले यसमा केही सामग्री थप्दैनौं। हामीले यसलाई `id` पनि दिएको छ ताकि यसलाई जाभास्क्रिप्ट प्रयोग गरेर सजिलै प्राप्त गर्न सकियोस्। `app.js` फाइलमा फर्केर नयाँ हेल्पर फंक्शन `updateElement` सिर्जना गर्नुहोस्: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` यो फंक्शन धेरै सरल छ: दिइएको तत्व *id* र *text* को आधारमा, यो मिल्दो `id` भएको DOM तत्वको पाठ सामग्री अपडेट गर्छ। अब हामीले यस विधिलाई `login` फंक्शनमा पहिलेको त्रुटि सन्देशको सट्टा प्रयोग गर्नेछौं: ```js if (data.error) { return updateElement('loginError', data.error); } ``` अब यदि तपाईंले अवैध खाताको साथ लगइन प्रयास गर्नुभयो भने, तपाईंले निम्न जस्तो देख्नुहुनेछ:  अब हामीसँग दृश्य रूपमा देखिने त्रुटि पाठ छ। तर यदि तपाईंले स्क्रिन रिडर प्रयोग गर्नुभयो भने तपाईंले केही घोषणा भएको देख्नुहुनेछैन। पृष्ठमा गतिशील रूपमा थपिएको पाठ स्क्रिन रिडरद्वारा घोषणा गर्नको लागि, यसले [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) प्रयोग गर्नुपर्छ। यहाँ हामीले अलर्ट नामक विशेष प्रकारको लाइभ क्षेत्र प्रयोग गर्नेछौं: ```html ``` `register` फंक्शन त्रुटिहरूको लागि पनि यही व्यवहार कार्यान्वयन गर्नुहोस् (HTML अपडेट गर्न नबिर्सनुहोस्)। ## ड्यासबोर्डमा जानकारी देखाउने हामीले भर्खरै देखेका समान प्रविधिहरू प्रयोग गरेर, हामीले ड्यासबोर्ड पृष्ठमा खाता जानकारी देखाउने काम गर्नेछौं। सर्भरबाट प्राप्त खाता वस्तु यस प्रकारको देखिन्छ: ```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 } ], } ``` > नोट: तपाईंको काम सजिलो बनाउनको लागि, तपाईंले पहिले नै डेटा भरिएको `test` खाता प्रयोग गर्न सक्नुहुन्छ। ### कार्य HTML मा "Balance" सेक्सनलाई प्लेसहोल्डर तत्वहरू थप्न प्रतिस्थापन गरेर सुरु गरौं: ```html

Balance:

``` हामीले खाता विवरण देखाउनको लागि नयाँ सेक्सन पनि थप्नेछौं: ```html

``` ✅ किनकि खाता विवरणले यसको तलको सामग्रीको लागि शीर्षकको रूपमा काम गर्छ, यसलाई हेडिङको रूपमा अर्थपूर्ण रूपमा मार्कअप गरिएको छ। [हेडिङ संरचना](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) कसरी पहुँचयोग्यताका लागि महत्त्वपूर्ण छ भन्ने बारे थप जान्नुहोस्, र पृष्ठलाई आलोचनात्मक रूपमा हेरेर के अरू हेडिङ हुन सक्छ भनेर निर्धारण गर्नुहोस्। अब, `app.js` मा नयाँ फंक्शन `updateDashboard` सिर्जना गरौं: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` पहिले, हामीसँग आवश्यक खाता डेटा छ कि छैन जाँच गर्छौं। त्यसपछि हामीले पहिले सिर्जना गरेको `updateElement()` फंक्शन प्रयोग गरेर HTML अपडेट गर्छौं। > ब्यालेन्स प्रदर्शनलाई अझ राम्रो बनाउन, हामीले [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) विधि प्रयोग गरेर दशमलव बिन्दु पछि २ अंक देखाउन बाध्य पार्छौं। अब हामीले ड्यासबोर्ड लोड हुँदा हरेक पटक `updateDashboard()` फंक्शन कल गर्नुपर्छ। यदि तपाईंले [पाठ १ असाइनमेन्ट](../1-template-route/assignment.md) पूरा गरिसक्नुभएको छ भने यो सीधा हुनुपर्छ, अन्यथा तपाईं निम्न कार्यान्वयन प्रयोग गर्न सक्नुहुन्छ। `updateRoute()` फंक्शनको अन्त्यमा यो कोड थप्नुहोस्: ```js if (typeof route.init === 'function') { route.init(); } ``` र रूट्स परिभाषालाई यससँग अपडेट गर्नुहोस्: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` यस परिवर्तनसँग, हरेक पटक ड्यासबोर्ड पृष्ठ देखाइन्छ, `updateDashboard()` फंक्शन कल गरिन्छ। लगइन पछि, तपाईंले खाता ब्यालेन्स, मुद्रा र विवरण देख्न सक्नुहुन्छ। ## HTML टेम्प्लेटहरू प्रयोग गरेर तालिका पङ्क्तिहरू गतिशील रूपमा सिर्जना गर्नुहोस् [पहिलो पाठमा](../1-template-route/README.md) हामीले HTML टेम्प्लेटहरू र [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) विधि प्रयोग गरेर हाम्रो एपमा नेभिगेसन कार्यान्वयन गरेका थियौं। टेम्प्लेटहरू साना पनि हुन सक्छन् र पृष्ठको पुनरावृत्त भागहरू गतिशील रूपमा भर्न प्रयोग गर्न सकिन्छ। हामीले HTML तालिकामा लेनदेनहरूको सूची देखाउन समान दृष्टिकोण प्रयोग गर्नेछौं। ### कार्य HTML `` मा नयाँ टेम्प्लेट थप्नुहोस्: ```html ``` यो टेम्प्लेटले एकल तालिका पङ्क्ति प्रतिनिधित्व गर्छ, जसमा हामीले भरिने ३ स्तम्भहरू छन्: लेनदेनको *मिति*, *वस्तु* र *रकम*। त्यसपछि, ड्यासबोर्ड टेम्प्लेटभित्रको तालिकाको `` तत्वमा यो `id` प्रोपर्टी थप्नुहोस् ताकि यसलाई जाभास्क्रिप्ट प्रयोग गरेर सजिलै फेला पार्न सकियोस्: ```html ``` हाम्रो HTML तयार छ। अब जाभास्क्रिप्ट कोडमा स्विच गरौं र नयाँ फंक्शन `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; } ``` यो फंक्शनले ठीक त्यसै गर्छ जसको नामले संकेत गर्छ: हामीले पहिले सिर्जना गरेको टेम्प्लेट प्रयोग गरेर, यो नयाँ तालिका पङ्क्ति सिर्जना गर्छ र लेनदेन डेटा प्रयोग गरेर यसको सामग्री भर्छ। हामीले यसलाई हाम्रो `updateDashboard()` फंक्शनमा तालिका भर्न प्रयोग गर्नेछौं: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` यहाँ हामीले [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) विधि प्रयोग गर्छौं जसले नयाँ DOM फ्रागमेन्ट सिर्जना गर्छ। यसमा काम गरेपछि अन्ततः यसलाई हाम्रो HTML तालिकामा संलग्न गरिन्छ। यो कोड काम गर्न सक्ने बनाउन अझै एउटा कुरा गर्न बाँकी छ। किनकि हाम्रो `updateElement()` फंक्शन हाल पाठ सामग्री मात्र समर्थन गर्छ। यसको कोडलाई अलि परिवर्तन गरौं: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` हामीले [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) विधि प्रयोग गर्छौं किनकि यसले पाठ वा [DOM Nodes](https://developer.mozilla.org/docs/Web/API/Node) दुबैलाई अभिभावक तत्वमा संलग्न गर्न अनुमति दिन्छ, जुन हाम्रो सबै प्रयोगका लागि उपयुक्त छ। यदि तपाईंले `test` खाता प्रयोग गरेर लगइन गर्न प्रयास गर्नुभयो भने, अब तपाईंले ड्यासबोर्डमा लेनदेन सूची देख्न सक्नुहुन्छ 🎉। --- ## 🚀 चुनौती ड्यासबोर्ड पृष्ठलाई वास्तविक बैंकिङ एप जस्तो देखिने बनाउनको लागि सँगै काम गर्नुहोस्। यदि तपाईंले पहिले नै आफ्नो एपलाई स्टाइल गर्नुभएको छ भने, [मिडिया क्वेरीहरू](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) प्रयोग गरेर [उत्तरदायी डिजाइन](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) बनाउने प्रयास गर्नुहोस् जसले डेस्कटप र मोबाइल उपकरणहरूमा राम्रोसँग काम गर्छ। यहाँ स्टाइल गरिएको ड्यासबोर्ड पृष्ठको उदाहरण छ:  ## पोस्ट-व्याख्यान क्विज [पोस्ट-व्याख्यान क्विज](https://ff-quizzes.netlify.app/web/quiz/46) ## असाइनमेन्ट [तपाईंको कोडलाई पुनःसंरचना गर्नुहोस् र टिप्पणीहरू थप्नुहोस्](assignment.md) **अस्वीकरण**: यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।