<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "89d0df9854ed020f155e94882ae88d4c",
  "translation_date": "2025-08-28T22:51:42+00:00",
  "source_file": "7-bank-project/3-data/README.md",
  "language_code": "bn"
}
-->
# ব্যাংকিং অ্যাপ তৈরি করুন পার্ট ৩: ডেটা আনার এবং ব্যবহারের পদ্ধতি

## প্রাক-লেকচার কুইজ

[প্রাক-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/45)

### ভূমিকা

প্রতিটি ওয়েব অ্যাপ্লিকেশনের কেন্দ্রে থাকে *ডেটা*। ডেটা বিভিন্ন রূপ নিতে পারে, তবে এর প্রধান উদ্দেশ্য হল ব্যবহারকারীর কাছে তথ্য প্রদর্শন করা। ওয়েব অ্যাপ্লিকেশনগুলি ক্রমশ আরও ইন্টারেক্টিভ এবং জটিল হয়ে উঠছে, তাই ব্যবহারকারী কীভাবে তথ্য অ্যাক্সেস করে এবং এর সাথে ইন্টারঅ্যাক্ট করে তা এখন ওয়েব ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ অংশ।

এই পাঠে, আমরা দেখব কীভাবে সার্ভার থেকে অ্যাসিঙ্ক্রোনাসভাবে ডেটা আনা যায় এবং এই ডেটা ব্যবহার করে HTML রিলোড না করেই ওয়েব পেজে তথ্য প্রদর্শন করা যায়।

### পূর্বশর্ত

এই পাঠের জন্য আপনাকে ওয়েব অ্যাপের [লগইন এবং রেজিস্ট্রেশন ফর্ম](../2-forms/README.md) অংশটি তৈরি করতে হবে। আপনাকে [Node.js](https://nodejs.org) ইনস্টল করতে হবে এবং [সার্ভার API চালাতে হবে](../api/README.md) লোকালভাবে যাতে আপনি অ্যাকাউন্ট ডেটা পেতে পারেন।

আপনার সার্ভার সঠিকভাবে চলছে কিনা তা পরীক্ষা করতে, টার্মিনালে এই কমান্ডটি চালান:

```sh
curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result
```

---

## AJAX এবং ডেটা আনা

প্রথাগত ওয়েবসাইটে, ব্যবহারকারী একটি লিঙ্ক নির্বাচন করলে বা ফর্মের মাধ্যমে ডেটা জমা দিলে পুরো HTML পেজ রিলোড হয়। নতুন ডেটা লোড করার সময়, ওয়েব সার্ভার একটি সম্পূর্ণ নতুন HTML পেজ ফেরত পাঠায়, যা ব্রাউজার দ্বারা প্রক্রিয়াকৃত হয়। এটি ব্যবহারকারীর বর্তমান ক্রিয়াকলাপকে বাধাগ্রস্ত করে এবং রিলোডের সময় ইন্টারঅ্যাকশন সীমিত করে। এই ওয়ার্কফ্লোকে *মাল্টি-পেজ অ্যাপ্লিকেশন* বা *MPA* বলা হয়।

![মাল্টি-পেজ অ্যাপ্লিকেশনে আপডেট ওয়ার্কফ্লো](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.bn.png)

যখন ওয়েব অ্যাপ্লিকেশন আরও জটিল এবং ইন্টারেক্টিভ হতে শুরু করে, তখন [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming)) নামে একটি নতুন কৌশল উদ্ভাবিত হয়। এই কৌশলটি ওয়েব অ্যাপ্লিকেশনগুলিকে জাভাস্ক্রিপ্ট ব্যবহার করে সার্ভার থেকে অ্যাসিঙ্ক্রোনাসভাবে ডেটা পাঠাতে এবং আনতে দেয়, HTML পেজ রিলোড না করেই। এর ফলে দ্রুত আপডেট এবং মসৃণ ব্যবহারকারীর ইন্টারঅ্যাকশন সম্ভব হয়। সার্ভার থেকে নতুন ডেটা পাওয়ার পর, বর্তমান HTML পেজটি জাভাস্ক্রিপ্ট ব্যবহার করে [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) API এর মাধ্যমে আপডেট করা যায়। সময়ের সাথে সাথে, এই পদ্ধতিটি [*সিঙ্গেল-পেজ অ্যাপ্লিকেশন* বা *SPA*](https://en.wikipedia.org/wiki/Single-page_application) নামে পরিচিত হয়েছে।

![সিঙ্গেল-পেজ অ্যাপ্লিকেশনে আপডেট ওয়ার্কফ্লো](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.bn.png)

যখন AJAX প্রথম চালু হয়েছিল, তখন অ্যাসিঙ্ক্রোনাসভাবে ডেটা আনার জন্য একমাত্র API ছিল [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)। তবে আধুনিক ব্রাউজারগুলি এখন আরও সুবিধাজনক এবং শক্তিশালী [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API) বাস্তবায়ন করে, যা প্রমিস ব্যবহার করে এবং JSON ডেটা পরিচালনার জন্য আরও উপযুক্ত।

> যদিও সমস্ত আধুনিক ব্রাউজার `Fetch API` সমর্থন করে, যদি আপনি চান আপনার ওয়েব অ্যাপ্লিকেশন পুরানো বা লিগ্যাসি ব্রাউজারে কাজ করুক, তবে [caniuse.com এ সামঞ্জস্যতার টেবিল](https://caniuse.com/fetch) পরীক্ষা করা সবসময়ই একটি ভালো ধারণা।

### কাজ

[পূর্ববর্তী পাঠে](../2-forms/README.md) আমরা একটি অ্যাকাউন্ট তৈরি করার জন্য রেজিস্ট্রেশন ফর্ম বাস্তবায়ন করেছি। এখন আমরা একটি বিদ্যমান অ্যাকাউন্ট ব্যবহার করে লগইন করার এবং এর ডেটা আনার জন্য কোড যোগ করব। `app.js` ফাইলটি খুলুন এবং একটি নতুন `login` ফাংশন যোগ করুন:

```js
async function login() {
  const loginForm = document.getElementById('loginForm')
  const user = loginForm.user.value;
}
```

এখানে আমরা প্রথমে `getElementById()` ব্যবহার করে ফর্ম এলিমেন্টটি আনছি এবং তারপর `loginForm.user.value` এর মাধ্যমে ইনপুট থেকে ইউজারনেমটি নিচ্ছি। প্রতিটি ফর্ম কন্ট্রোলকে তার নাম (HTML-এ `name` অ্যাট্রিবিউট ব্যবহার করে সেট করা) দ্বারা ফর্মের একটি প্রপার্টি হিসেবে অ্যাক্সেস করা যায়।

রেজিস্ট্রেশনের জন্য আমরা যা করেছি তার অনুরূপ, আমরা সার্ভার রিকোয়েস্ট করার জন্য আরেকটি ফাংশন তৈরি করব, তবে এবার অ্যাকাউন্ট ডেটা আনার জন্য:

```js
async function getAccount(user) {
  try {
    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
    return await response.json();
  } catch (error) {
    return { error: error.message || 'Unknown error' };
  }
}
```

আমরা `fetch` API ব্যবহার করে সার্ভার থেকে অ্যাসিঙ্ক্রোনাসভাবে ডেটা রিকোয়েস্ট করছি, তবে এবার আমাদের শুধুমাত্র URL ছাড়া অন্য কোনো অতিরিক্ত প্যারামিটার প্রয়োজন নেই, কারণ আমরা কেবল ডেটা কুয়েরি করছি। ডিফল্টভাবে, `fetch` একটি [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) HTTP রিকোয়েস্ট তৈরি করে, যা এখানে আমাদের প্রয়োজন।

✅ `encodeURIComponent()` একটি ফাংশন যা URL এর জন্য বিশেষ অক্ষরগুলোকে এস্কেপ করে। আমরা যদি এই ফাংশনটি না ডাকি এবং সরাসরি `user` ভ্যালুটি URL-এ ব্যবহার করি, তাহলে কী ধরনের সমস্যা হতে পারে?

এখন আমাদের `login` ফাংশনটি `getAccount` ব্যবহার করার জন্য আপডেট করা যাক:

```js
async function login() {
  const loginForm = document.getElementById('loginForm')
  const user = loginForm.user.value;
  const data = await getAccount(user);

  if (data.error) {
    return console.log('loginError', data.error);
  }

  account = data;
  navigate('/dashboard');
}
```

প্রথমে, যেহেতু `getAccount` একটি অ্যাসিঙ্ক্রোনাস ফাংশন, তাই সার্ভার রেজাল্টের জন্য অপেক্ষা করতে আমাদের `await` কীওয়ার্ড ব্যবহার করতে হবে। যেকোনো সার্ভার রিকোয়েস্টের মতো, আমাদের ত্রুটির ক্ষেত্রেও ডিল করতে হবে। আপাতত আমরা কেবল একটি লগ মেসেজ যোগ করব ত্রুটি প্রদর্শনের জন্য এবং পরে এটি নিয়ে ফিরে আসব।

এরপর আমাদের ডেটা কোথাও সংরক্ষণ করতে হবে যাতে আমরা পরে এটি ব্যবহার করে ড্যাশবোর্ডের তথ্য প্রদর্শন করতে পারি। যেহেতু `account` ভ্যারিয়েবলটি এখনও বিদ্যমান নয়, আমরা এটি আমাদের ফাইলের শীর্ষে একটি গ্লোবাল ভ্যারিয়েবল হিসেবে তৈরি করব:

```js
let account = null;
```

ব্যবহারকারীর ডেটা একটি ভ্যারিয়েবলে সংরক্ষণ করার পরে, আমরা *লগইন* পেজ থেকে *ড্যাশবোর্ড* এ যেতে পারি আমাদের বিদ্যমান `navigate()` ফাংশন ব্যবহার করে।

অবশেষে, আমাদের `login` ফাংশনটি লগইন ফর্ম জমা দেওয়ার সময় কল করতে হবে, HTML পরিবর্তন করে:

```html
<form id="loginForm" action="javascript:login()">
```

একটি নতুন অ্যাকাউন্ট রেজিস্টার করে এবং একই অ্যাকাউন্ট ব্যবহার করে লগইন করার চেষ্টা করে যাচাই করুন যে সবকিছু সঠিকভাবে কাজ করছে।

পরবর্তী অংশে যাওয়ার আগে, আমরা `register` ফাংশনটি সম্পূর্ণ করতে পারি ফাংশনের শেষে এটি যোগ করে:

```js
account = result;
navigate('/dashboard');
```

✅ আপনি কি জানেন যে ডিফল্টভাবে, আপনি কেবলমাত্র *একই ডোমেইন এবং পোর্ট* থেকে সার্ভার API কল করতে পারেন যেখান থেকে আপনি ওয়েব পেজটি দেখছেন? এটি ব্রাউজার দ্বারা প্রয়োগ করা একটি নিরাপত্তা ব্যবস্থা। কিন্তু আমাদের ওয়েব অ্যাপ `localhost:3000` এ চলছে, যেখানে সার্ভার API চলছে `localhost:5000` এ, এটি কীভাবে কাজ করছে? [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS) নামে একটি কৌশল ব্যবহার করে, যদি সার্ভার প্রতিক্রিয়ায় নির্দিষ্ট ডোমেইনের জন্য বিশেষ হেডার যোগ করে, তাহলে ক্রস-অরিজিন HTTP রিকোয়েস্ট করা সম্ভব।

> API সম্পর্কে আরও জানুন এই [পাঠটি](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon) নিয়ে।

## HTML আপডেট করে ডেটা প্রদর্শন

এখন যেহেতু আমাদের কাছে ব্যবহারকারীর ডেটা রয়েছে, আমাদের বিদ্যমান HTML আপডেট করতে হবে এটি প্রদর্শনের জন্য। আমরা ইতিমধ্যে জানি কীভাবে DOM থেকে একটি এলিমেন্ট আনতে হয়, উদাহরণস্বরূপ `document.getElementById()` ব্যবহার করে। একটি বেস এলিমেন্ট পাওয়ার পরে, এখানে কিছু API রয়েছে যা আপনি এটি পরিবর্তন করতে বা এর সাথে নতুন চাইল্ড এলিমেন্ট যোগ করতে ব্যবহার করতে পারেন:

- [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) প্রপার্টি ব্যবহার করে আপনি একটি এলিমেন্টের টেক্সট পরিবর্তন করতে পারেন। মনে রাখবেন, এই মানটি পরিবর্তন করলে এলিমেন্টের সমস্ত চাইল্ড (যদি থাকে) সরিয়ে ফেলে এবং এটি প্রদত্ত টেক্সট দিয়ে প্রতিস্থাপন করে। সুতরাং, এটি একটি নির্দিষ্ট এলিমেন্টের সমস্ত চাইল্ড সরানোর জন্য একটি কার্যকর পদ্ধতি, একটি খালি স্ট্রিং `''` বরাদ্দ করে।

- [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) এবং [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) মেথড ব্যবহার করে আপনি একটি বা একাধিক নতুন চাইল্ড এলিমেন্ট তৈরি এবং সংযুক্ত করতে পারেন।

✅ একটি এলিমেন্টের [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) প্রপার্টি ব্যবহার করে এর HTML কন্টেন্ট পরিবর্তন করাও সম্ভব, তবে এটি এড়িয়ে চলা উচিত কারণ এটি [ক্রস-সাইট স্ক্রিপ্টিং (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting) আক্রমণের জন্য ঝুঁকিপূর্ণ।

### কাজ

ড্যাশবোর্ড স্ক্রিনে যাওয়ার আগে, *লগইন* পেজে আমাদের আরেকটি কাজ করা উচিত। বর্তমানে, আপনি যদি এমন একটি ইউজারনেম দিয়ে লগইন করার চেষ্টা করেন যা বিদ্যমান নয়, একটি মেসেজ কনসোলে দেখানো হয়, কিন্তু একজন সাধারণ ব্যবহারকারীর জন্য কিছুই পরিবর্তন হয় না এবং আপনি জানেন না কী ঘটছে।

চলুন লগইন ফর্মে একটি প্লেসহোল্ডার এলিমেন্ট যোগ করি যেখানে প্রয়োজনে একটি ত্রুটির বার্তা প্রদর্শন করা যেতে পারে। একটি ভালো জায়গা হতে পারে লগইন `<button>` এর ঠিক আগে:

```html
...
<div id="loginError"></div>
<button>Login</button>
...
```

এই `<div>` এলিমেন্টটি খালি, যার মানে স্ক্রিনে কিছুই প্রদর্শিত হবে না যতক্ষণ না আমরা এতে কিছু কন্টেন্ট যোগ করি। আমরা এটিকে একটি `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);
}
```

এখন আপনি যদি একটি অবৈধ অ্যাকাউন্ট দিয়ে লগইন করার চেষ্টা করেন, আপনি এরকম কিছু দেখতে পাবেন:

![লগইনের সময় ত্রুটির বার্তা প্রদর্শন করা হচ্ছে এমন স্ক্রিনশট](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.bn.png)

এখন আমাদের কাছে একটি ত্রুটির টেক্সট রয়েছে যা ভিজ্যুয়ালি প্রদর্শিত হয়, কিন্তু আপনি যদি এটি একটি স্ক্রিন রিডার দিয়ে চেষ্টা করেন, আপনি লক্ষ্য করবেন যে কিছুই ঘোষণা করা হয় না। একটি পৃষ্ঠায় গতিশীলভাবে যোগ করা টেক্সট স্ক্রিন রিডার দ্বারা ঘোষণা করার জন্য, এটি একটি [লাইভ রিজিয়ন](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) ব্যবহার করতে হবে। এখানে আমরা একটি নির্দিষ্ট ধরনের লাইভ রিজিয়ন ব্যবহার করব যাকে একটি অ্যালার্ট বলা হয়:

```html
<div id="loginError" role="alert"></div>
```

`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
<section>
  Balance: <span id="balance"></span><span id="currency"></span>
</section>
```

আমরা ড্যাশবোর্ড টেমপ্লেটের নিচে একটি নতুন সেকশন যোগ করব অ্যাকাউন্টের বিবরণ প্রদর্শনের জন্য:

```html
<h2 id="description"></h2>
```

✅ যেহেতু অ্যাকাউন্টের বিবরণ এর নিচের কন্টেন্টের জন্য একটি শিরোনাম হিসেবে কাজ করে, এটি শিরোনাম হিসেবে সেমান্টিকভাবে মার্কআপ করা হয়েছে। [শিরোনাম কাঠামো](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 `<body>`-এ একটি নতুন টেমপ্লেট যোগ করুন:

```html
<template id="transaction">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</template>
```

এই টেমপ্লেটটি একটি একক টেবিল সারি উপস্থাপন করে, যেখানে আমরা পূরণ করতে চাই এমন ৩টি কলাম রয়েছে: একটি লেনদেনের *তারিখ*, *অবজেক্ট* এবং *পরিমাণ*।

তারপর, টেবিলের `<tbody>` এলিমেন্টে এই `id` প্রপার্টি যোগ করুন যাতে এটি জাভাস্ক্রিপ্ট ব্যবহার করে সহজে খুঁজে পাওয়া যায়:

```html
<tbody id="transactions"></tbody>
```

আমাদের 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) তৈরি করার চেষ্টা করুন, যা ডেস্কটপ এবং মোবাইল ডিভাইসে সুন্দরভাবে কাজ করবে।

এখানে একটি স্টাইল করা ড্যাশবোর্ড পেজের উদাহরণ দেওয়া হয়েছে:

![স্টাইল করার পর ড্যাশবোর্ডের একটি উদাহরণ ফলাফলের স্ক্রিনশট](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.bn.png)

## পোস্ট-লেকচার কুইজ

[পোস্ট-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/46)

## অ্যাসাইনমেন্ট

[আপনার কোড পুনর্গঠন এবং মন্তব্য যোগ করুন](assignment.md)

---

**অস্বীকৃতি**:  
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিক অনুবাদ প্রদানের চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না।