<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "431a0e773cfb4f7c13fa4358d01a7db0",
  "translation_date": "2025-10-20T22:03:20+00:00",
  "source_file": "7-bank-project/3-data/README.md",
  "language_code": "pa"
}
-->
# ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਓ ਭਾਗ 3: ਡਾਟਾ ਪ੍ਰਾਪਤੀ ਅਤੇ ਇਸਦੇ ਉਪਯੋਗ ਦੇ ਤਰੀਕੇ

## ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼

[ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](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.pa.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* ਵਿੱਚ ਵਿਕਸਿਤ ਹੋ ਗਈ ਹੈ। 

![ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਅੱਪਡੇਟ ਵਰਕਫਲੋ](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.pa.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 ਲਈ ਵਿਸ਼ੇਸ਼ ਅੱਖਰਾਂ ਨੂੰ ਐਸਕੇਪ ਕਰਦਾ ਹੈ। ਜੇਕਰ ਅਸੀਂ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਨਹੀਂ ਕਰਦੇ ਅਤੇ URL ਵਿੱਚ ਸਿੱਧੇ `user` ਮੁੱਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਤਾਂ ਸਾਨੂੰ ਕਿਹੜੀਆਂ ਸਮੱਸਿਆਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ?

ਹੁਣ ਅਸੀਂ ਆਪਣੇ `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* ਪੇਜ ਤੋਂ *dashboard* ਵਿੱਚ ਜਾ ਸਕਦੇ ਹਾਂ।

ਅੰਤ ਵਿੱਚ, ਜਦੋਂ ਲੌਗਇਨ ਫਾਰਮ ਸਬਮਿਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਅਸੀਂ ਆਪਣੇ `login` ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ, HTML ਨੂੰ ਸੋਧ ਕੇ:

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

ਨਵਾਂ ਖਾਤਾ ਰਜਿਸਟਰ ਕਰਕੇ ਅਤੇ ਉਸੇ ਖਾਤੇ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਲੌਗਇਨ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਕੇ ਜਾਂਚ ਕਰੋ ਕਿ ਸਭ ਕੁਝ ਠੀਕ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰ ਰਿਹਾ ਹੈ।

ਅਗਲੇ ਹਿੱਸੇ 'ਤੇ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ, ਅਸੀਂ ਇਹ ਵੀ ਕਰ ਸਕਦੇ ਹਾਂ ਕਿ `register` ਫੰਕਸ਼ਨ ਨੂੰ ਪੂਰਾ ਕਰ ਸਕਦੇ ਹਾਂ ਇਸਨੂੰ ਫੰਕਸ਼ਨ ਦੇ ਅੰਤ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਕੇ:

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

✅ ਕੀ ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ ਡਿਫਾਲਟ ਤੌਰ 'ਤੇ, ਤੁਸੀਂ ਸਿਰਫ਼ *ਉਸੇ ਡੋਮੇਨ ਅਤੇ ਪੋਰਟ* ਤੋਂ ਸਰਵਰ APIs ਨੂੰ ਕਾਲ ਕਰ ਸਕਦੇ ਹੋ ਜਿਸਨੂੰ ਤੁਸੀਂ ਵੇਖ ਰਹੇ ਹੋ? ਇਹ ਬ੍ਰਾਊਜ਼ਰਾਂ ਦੁਆਰਾ ਲਾਗੂ ਕੀਤੀ ਗਈ ਸੁਰੱਖਿਆ ਮਕੈਨਿਜ਼ਮ ਹੈ। ਪਰ ਰੁਕੋ, ਸਾਡਾ ਵੈੱਬ ਐਪ `localhost:3000` 'ਤੇ ਚੱਲ ਰਿਹਾ ਹੈ ਜਦਕਿ ਸਰਵਰ API `localhost:5000` 'ਤੇ ਚੱਲ ਰਿਹਾ ਹੈ, ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ? [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS) ਨਾਮਕ ਤਕਨੀਕ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਜੇਕਰ ਸਰਵਰ ਜਵਾਬ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਹੈਡਰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ, ਤਾਂ ਇਹ ਸੰਭਵ ਹੈ ਕਿ ਕੁਝ ਖਾਸ ਡੋਮੇਨ ਲਈ ਛੋਟਾਂ ਦੀ ਆਗਿਆ ਦਿੱਤੀ ਜਾ ਸਕੇ।

> APIs ਬਾਰੇ ਹੋਰ ਜਾਣਨ ਲਈ ਇਹ [ਪਾਠ](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon) ਲਓ

## HTML ਨੂੰ ਅੱਪਡੇਟ ਕਰਕੇ ਡਾਟਾ ਦਿਖਾਓ

ਹੁਣ ਜਦੋਂ ਸਾਡੇ ਕੋਲ ਉਪਭੋਗਤਾ ਡਾਟਾ ਹੈ, ਸਾਨੂੰ ਮੌਜੂਦਾ HTML ਨੂੰ ਅੱਪਡੇਟ ਕਰਕੇ ਇਸਨੂੰ ਦਿਖਾਉਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ। ਅਸੀਂ ਪਹਿਲਾਂ ਹੀ ਜਾਣਦੇ ਹਾਂ ਕਿ DOM ਤੋਂ ਇੱਕ ਐਲਿਮੈਂਟ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਾਪਤ ਕਰਨਾ ਹੈ, ਉਦਾਹਰਣ ਲਈ `document.getElementById()` ਦੀ ਵਰਤੋਂ ਕਰਕੇ। ਜਦੋਂ ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਬੇਸ ਐਲਿਮੈਂਟ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਇਨ੍ਹਾਂ APIs ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤੁਸੀਂ ਇਸਨੂੰ ਸੋਧ ਸਕਦੇ ਹੋ ਜਾਂ ਇਸ ਵਿੱਚ ਨਵੇਂ ਚਾਈਲਡ ਐਲਿਮੈਂਟ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ:

- [`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 ਸਮੱਗਰੀ ਨੂੰ ਬਦਲਣਾ ਵੀ ਸੰਭਵ ਹੈ, ਪਰ ਇਸਨੂੰ [cross-site scripting (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting) ਹਮਲਿਆਂ ਲਈ ਸੰਵੇਦਨਸ਼ੀਲ ਹੋਣ ਕਰਕੇ ਤਿਆਗਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।

### ਕੰਮ

ਡੈਸ਼ਬੋਰਡ ਸਕ੍ਰੀਨ 'ਤੇ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ, ਸਾਨੂੰ *login* ਪੇਜ 'ਤੇ ਇੱਕ ਹੋਰ ਚੀਜ਼ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ। ਮੌਜੂਦਾ ਸਮੇਂ ਵਿੱਚ, ਜੇ ਤੁਸੀਂ ਕਿਸੇ ਅਜਿਹੇ ਯੂਜ਼ਰਨੇਮ ਨਾਲ ਲੌਗਇਨ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹੋ ਜੋ ਮੌਜੂਦ ਨਹੀਂ ਹੈ, ਤਾਂ ਕਨਸੋਲ ਵਿੱਚ ਇੱਕ ਸੁਨੇਹਾ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ ਪਰ ਇੱਕ ਆਮ ਉਪਭੋਗਤਾ ਲਈ ਕੁਝ ਨਹੀਂ ਬਦਲਦਾ ਅਤੇ ਤੁਹਾਨੂੰ ਪਤਾ ਨਹੀਂ ਹੁੰਦਾ ਕਿ ਕੀ ਹੋ ਰਿਹਾ ਹੈ।

ਆਓ ਲੌਗਇਨ `<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* ਦੇ ਨਾਲ, ਇਹ DOM ਐਲਿਮੈਂਟ ਦੇ ਟੈਕਸਟ ਸਮੱਗਰੀ ਨੂੰ ਅੱਪਡੇਟ ਕਰੇਗਾ ਜਿਸਦਾ `id` ਮਿਲਦਾ ਹੈ। ਆਓ ਇਸ ਵਿਧੀ ਦੀ ਵਰਤੋਂ ਪਿਛਲੇ ਗਲਤੀ ਸੁਨੇਹੇ ਦੀ ਜਗ੍ਹਾ `login` ਫੰਕਸ਼ਨ ਵਿੱਚ ਕਰੀਏ:

```js
if (data.error) {
  return updateElement('loginError', data.error);
}
```

ਹੁਣ ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਅਵੈਧ ਖਾਤੇ ਨਾਲ ਲੌਗਇਨ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਣ ਨੂੰ ਮਿਲੇਗਾ:

![ਲੌਗਇਨ ਦੌਰਾਨ ਦਿਖਾਏ ਗਏ ਗਲਤੀ ਸੁਨੇਹੇ ਦੀ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.pa.png)

ਹੁਣ ਸਾਡੇ ਕੋਲ ਗਲਤੀ ਦਾ ਟੈਕਸਟ ਹੈ ਜੋ ਦ੍ਰਿਸ਼ਮਾਨ ਤੌਰ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ, ਪਰ ਜੇਕਰ ਤੁਸੀਂ ਇਸਨੂੰ ਸਕ੍ਰੀਨ ਰੀਡਰ ਨਾਲ ਅਜ਼ਮਾਉਂਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਨੋਟ ਕਰੋਗੇ ਕਿ ਕੁਝ ਵੀ ਐਲਾਨ ਨਹੀਂ ਕੀਤਾ ਗਿਆ। ਇੱਕ ਪੇਜ ਵਿੱਚ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ ਟੈਕਸਟ ਨੂੰ ਸਕ੍ਰੀਨ ਰੀਡਰ ਦੁਆਰਾ ਐਲਾਨਿਤ ਕਰਨ ਲਈ
ਅਸੀਂ [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) ਮੈਥਡ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਕਿਉਂਕਿ ਇਹ ਮਾਤਾ ਤੱਤ ਨਾਲ ਟੈਕਸਟ ਜਾਂ [DOM Nodes](https://developer.mozilla.org/docs/Web/API/Node) ਜੋੜਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ, ਜੋ ਸਾਡੇ ਸਾਰੇ ਕੇਸਾਂ ਲਈ ਬਿਲਕੁਲ ਸਹੀ ਹੈ।

ਜੇ ਤੁਸੀਂ `test` ਖਾਤੇ ਨਾਲ ਲੌਗਇਨ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ, ਤਾਂ ਹੁਣ ਤੁਹਾਨੂੰ ਡੈਸ਼ਬੋਰਡ 'ਤੇ ਲੈਣ-ਦੇਣ ਦੀ ਸੂਚੀ ਦਿਖਾਈ ਦੇਵੇਗੀ 🎉।

---

## GitHub Copilot Agent ਚੈਲੈਂਜ 🚀

Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:

**ਵੇਰਵਾ:** ਬੈਂਕਿੰਗ ਐਪ ਨੂੰ ਵਧੀਆ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਲੈਣ-ਦੇਣ ਦੀ ਖੋਜ ਅਤੇ ਫਿਲਟਰ ਕਰਨ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਹੋਵੇ, ਜੋ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਮਿਤੀ ਰੇਂਜ, ਰਕਮ, ਜਾਂ ਵੇਰਵਾ ਦੇ ਅਧਾਰ 'ਤੇ ਖਾਸ ਲੈਣ-ਦੇਣ ਲੱਭਣ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ।

**ਪ੍ਰੋੰਪਟ:** ਬੈਂਕਿੰਗ ਐਪ ਲਈ ਖੋਜ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੇ: 1) ਮਿਤੀ ਰੇਂਜ (from/to), ਘੱਟੋ-ਘੱਟ/ਵੱਧ ਤੋਂ ਵੱਧ ਰਕਮ, ਅਤੇ ਲੈਣ-ਦੇਣ ਦੇ ਵੇਰਵਾ ਕੁੰਜੀਆਂ ਲਈ ਇਨਪੁਟ ਫੀਲਡ ਵਾਲਾ ਖੋਜ ਫਾਰਮ, 2) ਇੱਕ `filterTransactions()` ਫੰਕਸ਼ਨ ਜੋ ਖੋਜ ਮਾਪਦੰਡ ਦੇ ਅਧਾਰ 'ਤੇ account.transactions ਐਰੇ ਨੂੰ ਫਿਲਟਰ ਕਰਦਾ ਹੈ, 3) `updateDashboard()` ਫੰਕਸ਼ਨ ਨੂੰ ਅਪਡੇਟ ਕਰੋ ਤਾਂ ਜੋ ਫਿਲਟਰ ਕੀਤੇ ਨਤੀਜੇ ਦਿਖਾਏ ਜਾ ਸਕਣ, ਅਤੇ 4) "Clear Filters" ਬਟਨ ਸ਼ਾਮਲ ਕਰੋ ਜੋ ਦ੍ਰਿਸ਼ ਨੂੰ ਰੀਸੈਟ ਕਰੇ। ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਐਰੇ ਮੈਥਡ ਜਿਵੇਂ `filter()` ਦੀ ਵਰਤੋਂ ਕਰੋ ਅਤੇ ਖਾਲੀ ਖੋਜ ਮਾਪਦੰਡ ਲਈ ਐਜ ਕੇਸਾਂ ਨੂੰ ਸੰਭਾਲੋ।

## 🚀 ਚੈਲੈਂਜ

ਇਕੱਠੇ ਕੰਮ ਕਰੋ ਤਾਂ ਕਿ ਡੈਸ਼ਬੋਰਡ ਪੇਜ ਨੂੰ ਇੱਕ ਅਸਲ ਬੈਂਕਿੰਗ ਐਪ ਵਾਂਗ ਲਗੇ। ਜੇ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਆਪਣੀ ਐਪ ਨੂੰ ਸਜਾਇਆ ਹੈ, ਤਾਂ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਕਿ [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) ਬਣਾਓ ਜੋ ਡੈਸਕਟਾਪ ਅਤੇ ਮੋਬਾਈਲ ਦੋਵਾਂ ਉਪਕਰਣਾਂ 'ਤੇ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰੇ।

ਇਹاں ਇੱਕ ਸਜਾਏ ਹੋਏ ਡੈਸ਼ਬੋਰਡ ਪੇਜ ਦਾ ਉਦਾਹਰਨ ਹੈ:

![ਡੈਸ਼ਬੋਰਡ ਦੇ ਸਜਾਏ ਹੋਏ ਨਤੀਜੇ ਦਾ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.pa.png)

## ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼

[ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/46)

## ਅਸਾਈਨਮੈਂਟ

[ਆਪਣੇ ਕੋਡ ਨੂੰ Refactor ਕਰੋ ਅਤੇ ਟਿੱਪਣੀ ਕਰੋ](assignment.md)

---

**ਅਸਵੀਕਰਤੀ**:  
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।