` एलिमेंट रिक्त आहे, म्हणजे स्क्रीनवर काहीही प्रदर्शित होणार नाही जोपर्यंत आपण त्यामध्ये काही सामग्री जोडत नाही. आम्ही त्याला `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); } ``` आता जर तुम्ही अवैध खात्याने लॉगिन करण्याचा प्रयत्न केला, तर तुम्हाला असे काहीतरी दिसेल:  आता आमच्याकडे त्रुटी मजकूर आहे जो दृश्यात्मकपणे दिसतो, परंतु जर तुम्ही स्क्रीन रीडर वापरून प्रयत्न केला तर तुम्हाला काहीही ऐकू येणार नाही. पृष्ठावर डायनॅमिक पद्धतीने जोडलेला मजकूर स्क्रीन रीडरद्वारे घोषित केला जावा यासाठी, त्याला [लाइव्ह रिजन](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 असाइनमेंट](../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 ``` हे टेम्पलेट एकच टेबल रो दर्शवते, ज्यामध्ये आम्हाला भरायचे आहे असे 3 कॉलम आहेत: व्यवहाराचा *date*, *object* आणि *amount*. यानंतर, डॅशबोर्ड टेम्पलेटमधील टेबलच्या `` एलिमेंटला JavaScript वापरून शोधणे सोपे होण्यासाठी हे `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()` फंक्शनमध्ये आम्ही [`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) शोध निकषांवर आधारित account.transactions अ‍ॅरे फिल्टर करणारी `filterTransactions()` फंक्शन, 3) फिल्टर केलेले निकाल दाखवण्यासाठी `updateDashboard()` फंक्शन अपडेट करा, आणि 4) दृश्य रीसेट करण्यासाठी "Clear Filters" बटण जोडा. आधुनिक JavaScript अ‍ॅरे पद्धती जसे `filter()` वापरा आणि रिक्त शोध निकषांसाठी एज केस हाताळा. ## 🚀 Challenge डॅशबोर्ड पृष्ठ खऱ्या बँकिंग अ‍ॅपसारखे दिसण्यासाठी एकत्र काम करा. जर तुम्ही आधीच तुमचे अ‍ॅप स्टाइल केले असेल, तर [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) तयार करण्याचा प्रयत्न करा जे डेस्कटॉप आणि मोबाइल डिव्हाइसवर चांगले कार्य करते. स्टाइल केलेल्या डॅशबोर्ड पृष्ठाचे उदाहरण येथे आहे:  ## Post-Lecture Quiz [Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/46) ## Assignment [तुमचा कोड पुनर्रचना करा आणि त्यावर टिप्पणी द्या](assignment.md) --- **अस्वीकरण**: हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण झालेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.