` एलिमेंट रिक्त आहे, म्हणजे स्क्रीनवर काहीही दिसणार नाही जोपर्यंत आपण त्यामध्ये काही सामग्री जोडत नाही. आम्ही त्याला `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); } ``` प्रथम, आमच्याकडे आवश्यक खाते डेटा आहे याची खात्री करतो. त्यानंतर, आम्ही पूर्वी तयार केलेल्या `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) पद्धतीचा वापर जर तुम्ही `test` खाते वापरून लॉगिन करण्याचा प्रयत्न केला, तर आता तुम्हाला डॅशबोर्डवर व्यवहारांची यादी दिसेल 🎉. --- ## 🚀 आव्हान एकत्र काम करून डॅशबोर्ड पृष्ठ खऱ्या बँकिंग अ‍ॅपसारखे दिसेल असे बनवा. जर तुम्ही आधीच तुमचे अ‍ॅप स्टाइल केले असेल, तर [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) चा वापर करून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात घ्या की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील मूळ दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर केल्यामुळे उद्भवणाऱ्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.