` तत्व खाली छ, जसको अर्थ हामीले यसमा केही सामग्री थप्दासम्म स्क्रिनमा केही देखिने छैन। हामीले यसलाई `id` पनि दिएका छौं ताकि यसलाई सजिलैसँग JavaScript बाट प्राप्त गर्न सकियोस्। `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); } ``` अब यदि तपाईं अवैध खातासँग लगइन प्रयास गर्नुहुन्छ भने, तपाईंले यस्तो देख्नुहुनेछ:  अब हामीसँग दृश्य रूपमा देखिने त्रुटि पाठ छ, तर यदि तपाईंले यसलाई स्क्रिन रिडरसँग प्रयास गर्नुभयो भने केही पनि घोषणा हुँदैन। पृष्ठमा गतिशील रूपमा थपिएको पाठ स्क्रिन रिडरहरूले घोषणा गर्नको लागि, यसले [लाइभ क्षेत्र](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` प्रोपर्टी थप्नुहोस् ताकि यसलाई JavaScript प्रयोग गरेर सजिलै फेला पार्न सकियोस्: ```html ``` हाम्रो HTML तयार छ, अब JavaScript कोडमा स्विच गरौं र नयाँ फङ्सन `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) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषामा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।