` عنصر خالی ہے، یعنی جب تک ہم اس میں کچھ مواد شامل نہ کریں، اسکرین پر کچھ بھی ظاہر نہیں ہوگا۔ ہم اسے ایک `id` بھی دیتے ہیں تاکہ ہم اسے جاوا اسکرپٹ کے ساتھ آسانی سے حاصل کر سکیں۔ `app.js` فائل پر واپس جائیں اور ایک نیا ہیلپر فنکشن `updateElement` بنائیں: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` یہ فنکشن کافی سیدھا ہے: دیے گئے عنصر *id* اور *text* کے ساتھ، یہ DOM عنصر کے متن کو اپ ڈیٹ کرے گا جس کا `id` مماثل ہوگا۔ آئیے اس طریقہ کو `login` فنکشن میں پچھلے غلطی کے پیغام کی جگہ استعمال کریں: ```js if (data.error) { return updateElement('loginError', data.error); } ``` اب اگر آپ کسی غلط اکاؤنٹ کے ساتھ لاگ ان کرنے کی کوشش کرتے ہیں، تو آپ کو کچھ ایسا نظر آنا چاہیے:  اب ہمارے پاس ایک غلطی کا متن ہے جو بصری طور پر ظاہر ہوتا ہے، لیکن اگر آپ اسے اسکرین ریڈر کے ساتھ آزمائیں تو آپ دیکھیں گے کہ کچھ بھی اعلان نہیں کیا جاتا۔ صفحے پر متحرک طور پر شامل کیے گئے متن کو اسکرین ریڈرز کے ذریعے اعلان کرنے کے لیے، اسے کچھ ایسا استعمال کرنا ہوگا جسے [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) کہا جاتا ہے۔ یہاں ہم ایک مخصوص قسم کے لائیو ریجن کا استعمال کریں گے جسے الرٹ کہا جاتا ہے: ```html ``` رجسٹر فنکشن کی غلطیوں کے لیے بھی یہی رویہ نافذ کریں (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 کالم ہیں جنہیں ہم بھرنا چاہتے ہیں: لین دین کی *تاریخ*، *آبجیکٹ* اور *رقم*۔ پھر، ٹیبل کے `` عنصر میں یہ `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` اکاؤنٹ استعمال کرکے لاگ ان کریں، تو آپ کو اب ڈیش بورڈ پر ٹرانزیکشن لسٹ نظر آئے گی 🎉۔ --- ## 🚀 چیلنج مل کر کام کریں تاکہ ڈیش بورڈ صفحہ ایک حقیقی بینکنگ ایپ کی طرح نظر آئے۔ اگر آپ نے پہلے ہی اپنی ایپ کو اسٹائل کیا ہے، تو [میڈیا کوئریز](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) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔