` तत्व खाली छ, जसको अर्थ स्क्रिनमा केही देखाइने छैन जबसम्म हामी यसमा केही सामग्री थप्दैनौं। हामीले यसलाई `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` खाता प्रयोग गरेर लगइन गर्न प्रयास गर्नुभयो भने, अब तपाईं ड्यासबोर्डमा लेनदेन सूची देख्न सक्नुहुन्छ 🎉। --- ## GitHub Copilot Agent Challenge 🚀 Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्: **विवरण:** बैंकिङ एपलाई सुधार गरेर लेनदेन खोजी र फिल्टर गर्ने सुविधा कार्यान्वयन गर्नुहोस् जसले प्रयोगकर्ताहरूलाई मिति दायरा, रकम, वा विवरणद्वारा विशिष्ट लेनदेनहरू खोज्न अनुमति दिन्छ। **प्रेरणा:** बैंकिङ एपको लागि खोजी सुविधा बनाउनुहोस् जसमा समावेश छ: 1) मिति दायरा (देखि/सम्म), न्यूनतम/अधिकतम रकम, र लेनदेन विवरण कुञ्जीशब्दहरूको लागि इनपुट क्षेत्रहरू भएको खोजी फारम, 2) `filterTransactions()` नामक एक फङ्सन जसले account.transactions array लाई खोजी मापदण्डको आधारमा फिल्टर गर्छ, 3) `updateDashboard()` फङ्सनलाई अपडेट गरेर फिल्टर गरिएको नतिजा देखाउनुहोस्, र 4) "Clear Filters" बटन थप्नुहोस् जसले दृश्यलाई रिसेट गर्छ। आधुनिक JavaScript array मेथडहरू जस्तै `filter()` प्रयोग गर्नुहोस् र खाली खोजी मापदण्डका लागि किनारा केसहरूलाई ह्यान्डल गर्नुहोस्। ## 🚀 चुनौती ड्यासबोर्ड पृष्ठलाई वास्तविक बैंकिङ एपजस्तो देखिने बनाउन सँगै काम गर्नुहोस्। यदि तपाईंले पहिले नै आफ्नो एपलाई स्टाइल गर्नुभएको छ भने, [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) प्रयोग गरेर [responsive design](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) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।