` घटक रिक्त आहे, म्हणजे स्क्रीनवर काहीही प्रदर्शित होणार नाही जोपर्यंत आम्ही त्यामध्ये काही सामग्री जोडत नाही. आम्ही त्याला `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); } ``` आता जर तुम्ही अवैध खात्याने लॉगिन करण्याचा प्रयत्न केला, तर तुम्हाला असे काहीतरी दिसेल:  आता आमच्याकडे व्हिज्युअली त्रुटी मजकूर आहे, परंतु जर तुम्ही स्क्रीन रीडर वापरून प्रयत्न केला तर तुम्हाला लक्षात येईल की काहीही घोषित केले जात नाही. पृष्ठावर डायनॅमिक पद्धतीने जोडलेला मजकूर स्क्रीन रीडरद्वारे घोषित होण्यासाठी, त्याला [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` मध्ये नवीन फंक्शन तयार करू जे प्लेसहोल्डर भरते: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` प्रथम, आम्ही पुढे जाण्यापूर्वी आमच्याकडे आवश्यक खाते डेटा आहे की नाही हे तपासतो. त्यानंतर आम्ही HTML अपडेट करण्यासाठी आम्ही पूर्वी तयार केलेल्या `updateElement()` फंक्शनचा वापर करतो. > बॅलन्स डिस्प्ले अधिक आकर्षक बनवण्यासाठी, आम्ही [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) पद्धत वापरतो जेणेकरून मूल्य दशांश बिंदू नंतर 2 अंकांसह प्रदर्शित होईल. आता आम्हाला डॅशबोर्ड लोड झाल्यावर प्रत्येक वेळी आमच्या `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 ``` हे टेम्पलेट एकच टेबल रो दर्शवते, ज्यामध्ये आम्हाला भरायचे असलेले ३ कॉलम आहेत: व्यवहाराचा *date*, *object* आणि *amount*. यानंतर, टेबलमधील `` घटकाला JavaScript वापरून शोधणे सोपे करण्यासाठी `id` प्रॉपर्टी जोडा: ```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()` फंक जर तुम्ही `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) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण होणाऱ्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.