` এলিমেন্টটি খালি, যার অর্থ স্ক্রিনে কিছুই প্রদর্শিত হবে না যতক্ষণ না আমরা এতে কিছু বিষয়বস্তু যোগ করি। আমরা এটিকে একটি `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); } ``` প্রথমে, আমরা যাচাই করি যে আমাদের প্রয়োজনীয় অ্যাকাউন্ট ডেটা রয়েছে কিনা। তারপর আমরা পূর্বে তৈরি করা `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` প্রপার্টি যোগ করুন যাতে এটি জাভাস্ক্রিপ্ট ব্যবহার করে সহজে খুঁজে পাওয়া যায়: ```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()` ফাংশন বর্তমানে শুধুমাত্র টেক্সট বিষয়বস্তু সমর্থন করে যদি আপনি `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) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতা নিশ্চিত করার চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না।