<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "1b0aeccb600f83c603cd70cb42df594d",
  "translation_date": "2025-08-28T17:13:56+00:00",
  "source_file": "4-typing-game/typing-game/README.md",
  "language_code": "pa"
}
-->
# ਇਵੈਂਟਸ ਦੀ ਵਰਤੋਂ ਨਾਲ ਖੇਡ ਬਣਾਉਣਾ

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

[ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/21)

## ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ

ਜਦੋਂ ਅਸੀਂ ਬ੍ਰਾਊਜ਼ਰ ਅਧਾਰਿਤ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਂਦੇ ਹਾਂ, ਤਾਂ ਅਸੀਂ ਉਪਭੋਗਤਾ ਲਈ ਇੱਕ ਗ੍ਰਾਫਿਕਲ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ (GUI) ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਾਂ, ਜਿਸਦਾ ਉਪਯੋਗ ਉਹ ਸਾਡੇ ਬਣਾਏ ਗਏ ਸਿਸਟਮ ਨਾਲ ਸੰਚਾਰ ਕਰਨ ਲਈ ਕਰਦੇ ਹਨ। ਬ੍ਰਾਊਜ਼ਰ ਨਾਲ ਸੰਚਾਰ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਆਮ ਤਰੀਕਾ ਵੱਖ-ਵੱਖ ਤੱਤਾਂ 'ਤੇ ਕਲਿੱਕ ਕਰਨਾ ਅਤੇ ਟਾਈਪ ਕਰਨਾ ਹੈ। ਇੱਕ ਡਿਵੈਲਪਰ ਦੇ ਤੌਰ 'ਤੇ ਸਾਨੂੰ ਇਹ ਪਤਾ ਨਹੀਂ ਹੁੰਦਾ ਕਿ ਉਪਭੋਗਤਾ ਇਹ ਕਾਰਵਾਈਆਂ ਕਦੋਂ ਕਰਨਗੇ!

[ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ](https://en.wikipedia.org/wiki/Event-driven_programming) ਉਹ ਪ੍ਰੋਗਰਾਮਿੰਗ ਤਰੀਕਾ ਹੈ ਜੋ ਅਸੀਂ ਆਪਣੇ GUI ਨੂੰ ਬਣਾਉਣ ਲਈ ਵਰਤਦੇ ਹਾਂ। ਜੇ ਅਸੀਂ ਇਸ ਸ਼ਬਦ ਨੂੰ ਥੋੜ੍ਹਾ ਵੱਖਰਾ ਕਰੀਏ, ਤਾਂ ਅਸੀਂ ਵੇਖਦੇ ਹਾਂ ਕਿ ਇਸਦਾ ਮੁੱਖ ਹਿੱਸਾ **ਇਵੈਂਟ** ਹੈ। [ਇਵੈਂਟ](https://www.merriam-webster.com/dictionary/event), ਮੈਰੀਅਮ-ਵੇਬਸਟਰ ਦੇ ਅਨੁਸਾਰ, "ਕੁਝ ਜੋ ਹੁੰਦਾ ਹੈ" ਵਜੋਂ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ। ਇਹ ਸਾਡੇ ਹਾਲਾਤ ਨੂੰ ਬਹੁਤ ਹੀ ਸਹੀ ਢੰਗ ਨਾਲ ਦਰਸਾਉਂਦਾ ਹੈ। ਸਾਨੂੰ ਪਤਾ ਹੈ ਕਿ ਕੁਝ ਹੋਵੇਗਾ ਜਿਸ ਲਈ ਅਸੀਂ ਕੁਝ ਕੋਡ ਚਲਾਉਣਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਪਰ ਸਾਨੂੰ ਇਹ ਨਹੀਂ ਪਤਾ ਕਿ ਇਹ ਕਦੋਂ ਹੋਵੇਗਾ।

ਜਿਸ ਤਰ੍ਹਾਂ ਅਸੀਂ ਇੱਕ ਸੈਕਸ਼ਨ ਦੇ ਕੋਡ ਨੂੰ ਚਲਾਉਣ ਲਈ ਚਿੰਨ੍ਹਤ ਕਰਦੇ ਹਾਂ, ਅਸੀਂ ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਉਂਦੇ ਹਾਂ। ਜਦੋਂ ਅਸੀਂ [ਪ੍ਰੋਸੀਜਰਲ ਪ੍ਰੋਗਰਾਮਿੰਗ](https://en.wikipedia.org/wiki/Procedural_programming) ਬਾਰੇ ਸੋਚਦੇ ਹਾਂ, ਤਾਂ ਫੰਕਸ਼ਨ ਇੱਕ ਖਾਸ ਕ੍ਰਮ ਵਿੱਚ ਕਾਲ ਕੀਤੇ ਜਾਂਦੇ ਹਨ। ਇਹੀ ਗੱਲ ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ ਵਿੱਚ ਵੀ ਸੱਚ ਹੈ। ਫਰਕ ਸਿਰਫ ਇਹ ਹੈ ਕਿ **ਫੰਕਸ਼ਨ ਕਿਵੇਂ ਕਾਲ ਕੀਤੇ ਜਾਂਦੇ ਹਨ।**

ਇਵੈਂਟਸ (ਜਿਵੇਂ ਕਿ ਬਟਨ ਕਲਿੱਕ ਕਰਨਾ, ਟਾਈਪ ਕਰਨਾ ਆਦਿ) ਨੂੰ ਹੈਂਡਲ ਕਰਨ ਲਈ, ਅਸੀਂ **ਇਵੈਂਟ ਲਿਸਨਰਸ** ਰਜਿਸਟਰ ਕਰਦੇ ਹਾਂ। ਇੱਕ ਇਵੈਂਟ ਲਿਸਨਰ ਇੱਕ ਫੰਕਸ਼ਨ ਹੁੰਦਾ ਹੈ ਜੋ ਕਿਸੇ ਇਵੈਂਟ ਦੇ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸਦੇ ਜਵਾਬ ਵਿੱਚ ਚਲਦਾ ਹੈ। ਇਵੈਂਟ ਲਿਸਨਰ UI ਨੂੰ ਅਪਡੇਟ ਕਰ ਸਕਦੇ ਹਨ, ਸਰਵਰ ਨੂੰ ਕਾਲ ਕਰ ਸਕਦੇ ਹਨ, ਜਾਂ ਉਪਭੋਗਤਾ ਦੀ ਕਾਰਵਾਈ ਦੇ ਜਵਾਬ ਵਿੱਚ ਜੋ ਕੁਝ ਵੀ ਲੋੜੀਂਦਾ ਹੈ, ਉਹ ਕਰ ਸਕਦੇ ਹਨ। ਅਸੀਂ [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਤੇ ਚਲਾਉਣ ਲਈ ਇੱਕ ਫੰਕਸ਼ਨ ਪ੍ਰਦਾਨ ਕਰਕੇ ਇੱਕ ਇਵੈਂਟ ਲਿਸਨਰ ਸ਼ਾਮਲ ਕਰਦੇ ਹਾਂ।

> **NOTE:** ਇਹ ਗੱਲ ਜ਼ਰੂਰ ਹਾਈਲਾਈਟ ਕਰਨ ਵਾਲੀ ਹੈ ਕਿ ਇਵੈਂਟ ਲਿਸਨਰ ਬਣਾਉਣ ਦੇ ਕਈ ਤਰੀਕੇ ਹਨ। ਤੁਸੀਂ ਗੁਮਨਾਮ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਜਾਂ ਨਾਮ ਵਾਲੇ ਫੰਕਸ਼ਨ ਬਣਾ ਸਕਦੇ ਹੋ। ਤੁਸੀਂ ਵੱਖ-ਵੱਖ ਸ਼ਾਰਟਕਟ ਵਰਤ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ `click` ਪ੍ਰਾਪਰਟੀ ਸੈਟ ਕਰਨਾ ਜਾਂ `addEventListener` ਦੀ ਵਰਤੋਂ ਕਰਨਾ। ਸਾਡੇ ਅਭਿਆਸ ਵਿੱਚ ਅਸੀਂ `addEventListener` ਅਤੇ ਗੁਮਨਾਮ ਫੰਕਸ਼ਨ 'ਤੇ ਧਿਆਨ ਦੇਣ ਜਾ ਰਹੇ ਹਾਂ, ਕਿਉਂਕਿ ਇਹ ਵੈੱਬ ਡਿਵੈਲਪਰਾਂ ਦੁਆਰਾ ਵਰਤਿਆ ਜਾਣ ਵਾਲਾ ਸਭ ਤੋਂ ਆਮ ਤਰੀਕਾ ਹੈ। ਇਹ ਸਭ ਤੋਂ ਲਚਕੀਲਾ ਵੀ ਹੈ, ਕਿਉਂਕਿ `addEventListener` ਸਾਰੇ ਇਵੈਂਟਸ ਲਈ ਕੰਮ ਕਰਦਾ ਹੈ, ਅਤੇ ਇਵੈਂਟ ਦਾ ਨਾਮ ਇੱਕ ਪੈਰਾਮੀਟਰ ਵਜੋਂ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

### ਆਮ ਇਵੈਂਟਸ

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

- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): ਉਪਭੋਗਤਾ ਨੇ ਕਿਸੇ ਚੀਜ਼ 'ਤੇ ਕਲਿੱਕ ਕੀਤਾ, ਆਮ ਤੌਰ 'ਤੇ ਬਟਨ ਜਾਂ ਹਾਈਪਰਲਿੰਕ
- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): ਉਪਭੋਗਤਾ ਨੇ ਸੱਜੇ ਮਾਊਸ ਬਟਨ ਨਾਲ ਕਲਿੱਕ ਕੀਤਾ
- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): ਉਪਭੋਗਤਾ ਨੇ ਕੁਝ ਟੈਕਸਟ ਹਾਈਲਾਈਟ ਕੀਤਾ
- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): ਉਪਭੋਗਤਾ ਨੇ ਕੁਝ ਟੈਕਸਟ ਦਰਜ ਕੀਤਾ

## ਖੇਡ ਬਣਾਉਣਾ

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

- ਖਿਡਾਰੀ **ਸਟਾਰਟ** ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਦਾ ਹੈ ਅਤੇ ਉਸਨੂੰ ਟਾਈਪ ਕਰਨ ਲਈ ਇੱਕ ਕੋਟ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ
- ਖਿਡਾਰੀ ਜਿੰਨਾ ਜਲਦੀ ਹੋ ਸਕੇ ਟੈਕਸਟਬਾਕਸ ਵਿੱਚ ਕੋਟ ਟਾਈਪ ਕਰਦਾ ਹੈ
  - ਜਿਵੇਂ ਹੀ ਹਰ ਸ਼ਬਦ ਪੂਰਾ ਹੁੰਦਾ ਹੈ, ਅਗਲਾ ਸ਼ਬਦ ਹਾਈਲਾਈਟ ਹੁੰਦਾ ਹੈ
  - ਜੇ ਖਿਡਾਰੀ ਨੇ ਗਲਤੀ ਕੀਤੀ, ਤਾਂ ਟੈਕਸਟਬਾਕਸ ਲਾਲ ਹੋ ਜਾਂਦਾ ਹੈ
  - ਜਦੋਂ ਖਿਡਾਰੀ ਕੋਟ ਪੂਰਾ ਕਰ ਲੈਂਦਾ ਹੈ, ਤਾਂ ਇੱਕ ਸਫਲਤਾ ਸੁਨੇਹਾ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਲੰਘਿਆ ਸਮਾਂ ਦਰਸਾਇਆ ਜਾਂਦਾ ਹੈ

ਆਓ ਆਪਣੀ ਖੇਡ ਬਣਾਈਏ ਅਤੇ ਇਵੈਂਟਸ ਬਾਰੇ ਸਿੱਖੀਏ!

### ਫਾਈਲ ਸਟ੍ਰਕਚਰ

ਸਾਨੂੰ ਕੁੱਲ ਤਿੰਨ ਫਾਈਲਾਂ ਦੀ ਲੋੜ ਹੋਵੇਗੀ: **index.html**, **script.js** ਅਤੇ **style.css**। ਆਓ ਇਹਨਾਂ ਨੂੰ ਸੈਟਅੱਪ ਕਰੀਏ ਤਾਂ ਜੋ ਸਾਡਾ ਕੰਮ ਥੋੜ੍ਹਾ ਆਸਾਨ ਹੋ ਜਾਵੇ।

- ਇੱਕ ਨਵਾਂ ਫੋਲਡਰ ਬਣਾਓ ਅਤੇ ਇਸ ਵਿੱਚ ਕੰਮ ਕਰਨ ਲਈ ਕਮਾਂਡ ਪ੍ਰੰਪਟ ਜਾਂ ਟਰਮੀਨਲ ਵਿੱਚ ਹੇਠਾਂ ਦਿੱਤੀ ਕਮਾਂਡ ਚਲਾਓ:

```bash
# Linux or macOS
mkdir typing-game && cd typing-game

# Windows
md typing-game && cd typing-game
```

- ਵਿਜ਼ੂਅਲ ਸਟੂਡੀਓ ਕੋਡ ਖੋਲ੍ਹੋ

```bash
code .
```

- ਵਿਜ਼ੂਅਲ ਸਟੂਡੀਓ ਕੋਡ ਵਿੱਚ ਫੋਲਡਰ ਵਿੱਚ ਹੇਠਾਂ ਦਿੱਤੇ ਨਾਮਾਂ ਵਾਲੀਆਂ ਤਿੰਨ ਫਾਈਲਾਂ ਸ਼ਾਮਲ ਕਰੋ:
  - index.html
  - script.js
  - style.css

## ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਬਣਾਓ

ਜੇ ਅਸੀਂ ਲੋੜਾਂ ਦੀ ਜਾਂਚ ਕਰੀਏ, ਤਾਂ ਸਾਨੂੰ ਪਤਾ ਲੱਗਦਾ ਹੈ ਕਿ ਸਾਡੇ HTML ਪੰਨੇ 'ਤੇ ਕੁਝ ਤੱਤਾਂ ਦੀ ਲੋੜ ਹੋਵੇਗੀ। ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਕਿਸੇ ਰੈਸੀਪੀ ਲਈ ਸਮੱਗਰੀ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ:

- ਉਪਭੋਗਤਾ ਲਈ ਟਾਈਪ ਕਰਨ ਲਈ ਕੋਟ ਦਿਖਾਉਣ ਲਈ ਕੋਈ ਜਗ੍ਹਾ
- ਕੋਈ ਸੁਨੇਹਾ ਦਿਖਾਉਣ ਲਈ ਜਗ੍ਹਾ, ਜਿਵੇਂ ਕਿ ਸਫਲਤਾ ਸੁਨੇਹਾ
- ਟਾਈਪ ਕਰਨ ਲਈ ਇੱਕ ਟੈਕਸਟਬਾਕਸ
- ਸਟਾਰਟ ਬਟਨ

ਇਨ੍ਹਾਂ ਵਿੱਚੋਂ ਹਰ ਇੱਕ ਨੂੰ IDs ਦੀ ਲੋੜ ਹੋਵੇਗੀ ਤਾਂ ਜੋ ਅਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਇਹਨਾਂ ਨਾਲ ਕੰਮ ਕਰ ਸਕੀਏ। ਅਸੀਂ CSS ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫਾਈਲਾਂ ਦੇ ਹਵਾਲੇ ਵੀ ਸ਼ਾਮਲ ਕਰਾਂਗੇ।

**index.html** ਨਾਮ ਦੀ ਇੱਕ ਨਵੀਂ ਫਾਈਲ ਬਣਾਓ। ਹੇਠਾਂ ਦਿੱਤਾ HTML ਸ਼ਾਮਲ ਕਰੋ:

```html
<!-- inside index.html -->
<html>
<head>
  <title>Typing game</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Typing game!</h1>
  <p>Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!</p>
  <p id="quote"></p> <!-- This will display our quote -->
  <p id="message"></p> <!-- This will display any status messages -->
  <div>
    <input type="text" aria-label="current word" id="typed-value" /> <!-- The textbox for typing -->
    <button type="button" id="start">Start</button> <!-- To start the game -->
  </div>
  <script src="script.js"></script>
</body>
</html>
```

### ਐਪਲੀਕੇਸ਼ਨ ਲਾਂਚ ਕਰੋ

ਹਮੇਸ਼ਾ ਵਧੀਆ ਹੁੰਦਾ ਹੈ ਕਿ ਵਿਕਾਸ ਦੌਰਾਨ ਵੱਖ-ਵੱਖ ਪੜਾਅ 'ਤੇ ਦੇਖਿਆ ਜਾਵੇ ਕਿ ਚੀਜ਼ਾਂ ਕਿਵੇਂ ਲੱਗਦੀਆਂ ਹਨ। ਆਓ ਆਪਣੀ ਐਪਲੀਕੇਸ਼ਨ ਲਾਂਚ ਕਰੀਏ। ਵਿਜ਼ੂਅਲ ਸਟੂਡੀਓ ਕੋਡ ਲਈ ਇੱਕ ਸ਼ਾਨਦਾਰ ਐਕਸਟੈਂਸ਼ਨ ਹੈ ਜਿਸਨੂੰ [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) ਕਿਹਾ ਜਾਂਦਾ ਹੈ, ਜੋ ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਲੋਕਲ ਹੋਸਟ ਕਰੇਗਾ ਅਤੇ ਹਰ ਵਾਰ ਤੁਸੀਂ ਸੇਵ ਕਰੋਗੇ, ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਰੀਫ੍ਰੈਸ਼ ਕਰੇਗਾ।

- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) ਇੰਸਟਾਲ ਕਰੋ
  - ਲਿੰਕ 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਅਤੇ **Install** ਬਟਨ ਦਬਾਓ
  - ਬ੍ਰਾਊਜ਼ਰ ਤੁਹਾਨੂੰ ਵਿਜ਼ੂਅਲ ਸਟੂਡੀਓ ਕੋਡ ਖੋਲ੍ਹਣ ਲਈ ਕਹੇਗਾ, ਅਤੇ ਫਿਰ ਵਿਜ਼ੂਅਲ ਸਟੂਡੀਓ ਕੋਡ ਤੁਹਾਨੂੰ ਇੰਸਟਾਲ ਕਰਨ ਲਈ ਕਹੇਗਾ
  - ਜੇ ਲੋੜ ਹੋਵੇ, ਤਾਂ ਵਿਜ਼ੂਅਲ ਸਟੂਡੀਓ ਕੋਡ ਨੂੰ ਰੀਸਟਾਰਟ ਕਰੋ
- ਇੰਸਟਾਲ ਹੋਣ ਤੋਂ ਬਾਅਦ, ਵਿਜ਼ੂਅਲ ਸਟੂਡੀਓ ਕੋਡ ਵਿੱਚ, **Ctrl-Shift-P** (ਜਾਂ **Cmd-Shift-P**) ਦਬਾਓ ਤਾਂ ਜੋ ਕਮਾਂਡ ਪੈਲੇਟ ਖੁੱਲੇ
- **Live Server: Open with Live Server** ਟਾਈਪ ਕਰੋ
  - Live Server ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਹੋਸਟ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰੇਗਾ
- ਬ੍ਰਾਊਜ਼ਰ ਖੋਲ੍ਹੋ ਅਤੇ **https://localhost:5500** 'ਤੇ ਜਾਓ
- ਹੁਣ ਤੁਹਾਨੂੰ ਉਹ ਪੰਨਾ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਬਣਾਇਆ ਹੈ!

ਆਓ ਕੁਝ ਫੰਕਸ਼ਨਲਿਟੀ ਸ਼ਾਮਲ ਕਰੀਏ।

## CSS ਸ਼ਾਮਲ ਕਰੋ

ਸਾਡੇ HTML ਬਣਾਉਣ ਤੋਂ ਬਾਅਦ, ਆਓ CSS ਸ਼ਾਮਲ ਕਰੀਏ ਜੋ ਮੁੱਖ ਸਟਾਈਲਿੰਗ ਪ੍ਰਦਾਨ ਕਰੇਗਾ। ਸਾਨੂੰ ਉਸ ਸ਼ਬਦ ਨੂੰ ਹਾਈਲਾਈਟ ਕਰਨਾ ਹੈ ਜੋ ਖਿਡਾਰੀ ਨੂੰ ਟਾਈਪ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ, ਅਤੇ ਜੇ ਉਹ ਗਲਤ ਟਾਈਪ ਕਰਦਾ ਹੈ, ਤਾਂ ਟੈਕਸਟਬਾਕਸ ਨੂੰ ਰੰਗਦਾਰ ਕਰਨਾ ਹੈ। ਅਸੀਂ ਇਹ ਦੋ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਨਾਲ ਕਰਾਂਗੇ।

**style.css** ਨਾਮ ਦੀ ਇੱਕ ਨਵੀਂ ਫਾਈਲ ਬਣਾਓ ਅਤੇ ਹੇਠਾਂ ਦਿੱਤਾ ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ।

```css
/* inside style.css */
.highlight {
  background-color: yellow;
}

.error {
  background-color: lightcoral;
  border: red;
}
```

✅ CSS ਦੇ ਮਾਮਲੇ ਵਿੱਚ ਤੁਸੀਂ ਆਪਣਾ ਪੰਨਾ ਆਪਣੇ ਮਨਪਸੰਦ ਢੰਗ ਨਾਲ ਲੇਆਉਟ ਕਰ ਸਕਦੇ ਹੋ। ਕੁਝ ਸਮਾਂ ਲਓ ਅਤੇ ਪੰਨੇ ਨੂੰ ਹੋਰ ਆਕਰਸ਼ਕ ਬਣਾਓ:

- ਵੱਖਰਾ ਫੋਂਟ ਚੁਣੋ
- ਹੈਡਰਾਂ ਨੂੰ ਰੰਗਦਾਰ ਕਰੋ
- ਆਈਟਮਾਂ ਦਾ ਆਕਾਰ ਬਦਲੋ

## ਜਾਵਾਸਕ੍ਰਿਪਟ

ਸਾਡੇ UI ਬਣਾਉਣ ਤੋਂ ਬਾਅਦ, ਹੁਣ ਅਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ 'ਤੇ ਧਿਆਨ ਦੇਵਾਂਗੇ ਜੋ ਲਾਜਿਕ ਪ੍ਰਦਾਨ ਕਰੇਗਾ। ਅਸੀਂ ਇਸਨੂੰ ਕੁਝ ਪੜਾਅ ਵਿੱਚ ਤੋੜਾਂਗੇ:

- [ਕੌਂਸਟੈਂਟਸ ਬਣਾਓ](../../../../4-typing-game/typing-game)
- [ਖੇਡ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਇਵੈਂਟ ਲਿਸਨਰ](../../../../4-typing-game/typing-game)
- [ਟਾਈਪਿੰਗ ਲਈ ਇਵੈਂਟ ਲਿਸਨਰ](../../../../4-typing-game/typing-game)

ਪਰ ਪਹਿਲਾਂ, **script.js** ਨਾਮ ਦੀ ਇੱਕ ਨਵੀਂ ਫਾਈਲ ਬਣਾਓ।

### ਕੌਂਸਟੈਂਟਸ ਸ਼ਾਮਲ ਕਰੋ

ਸਾਨੂੰ ਕੁਝ ਚੀਜ਼ਾਂ ਦੀ ਲੋੜ ਹੋਵੇਗੀ ਜੋ ਸਾਡੇ ਲਈ ਪ੍ਰੋਗਰਾਮਿੰਗ ਨੂੰ ਆਸਾਨ ਬਣਾਉਣਗੀਆਂ। ਫਿਰ, ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਕਿਸੇ ਰੈਸੀਪੀ ਲਈ ਸਮੱਗਰੀ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ:

- ਸਾਰੇ ਕੋਟਾਂ ਦੀ ਸੂਚੀ ਵਾਲਾ ਇੱਕ ਐਰੇ
- ਮੌਜੂਦਾ ਕੋਟ ਦੇ ਸਾਰੇ ਸ਼ਬਦਾਂ ਨੂੰ ਸਟੋਰ ਕਰਨ ਲਈ ਖਾਲੀ ਐਰੇ
- ਖਿਡਾਰੀ ਜਿਸ ਸ਼ਬਦ ਨੂੰ ਇਸ ਸਮੇਂ ਟਾਈਪ ਕਰ ਰਿਹਾ ਹੈ, ਉਸਦਾ ਇੰਡੈਕਸ ਸਟੋਰ ਕਰਨ ਲਈ ਜਗ੍ਹਾ
- ਸਮਾਂ ਜਦੋਂ ਖਿਡਾਰੀ ਨੇ ਸਟਾਰਟ 'ਤੇ ਕਲਿੱਕ ਕੀਤਾ

ਸਾਨੂੰ UI ਤੱਤਾਂ ਦੇ ਹਵਾਲੇ ਵੀ ਚਾਹੀਦੇ ਹਨ:

- ਟੈਕਸਟਬਾਕਸ (**typed-value**)
- ਕੋਟ ਡਿਸਪਲੇ (**quote**)
- ਸੁਨੇਹਾ (**message**)

```javascript
// inside script.js
// all of our quotes
const quotes = [
    'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
    'There is nothing more deceptive than an obvious fact.',
    'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
    'I never make exceptions. An exception disproves the rule.',
    'What one man can invent another can discover.',
    'Nothing clears up a case so much as stating it to another person.',
    'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
];
// store the list of words and the index of the word the player is currently typing
let words = [];
let wordIndex = 0;
// the starting time
let startTime = Date.now();
// page elements
const quoteElement = document.getElementById('quote');
const messageElement = document.getElementById('message');
const typedValueElement = document.getElementById('typed-value');
```

✅ ਆਪਣੀ ਖੇਡ ਵਿੱਚ ਹੋਰ ਕੋਟ ਸ਼ਾਮਲ ਕਰੋ

> **NOTE:** ਅਸੀਂ `document.getElementById` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਜਦੋਂ ਚਾਹੀਏ ਤੱਤਾਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਾਂ। ਕਿਉਂਕਿ ਅਸੀਂ ਇਹਨਾਂ ਤੱਤਾਂ ਨੂੰ ਨਿਯਮਿਤ ਤੌਰ 'ਤੇ ਰਿਫਰ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ, ਅਸੀਂ ਸਟ੍ਰਿੰਗ ਲਿਟਰਲਜ਼ ਨਾਲ ਗਲਤੀਆਂ ਤੋਂ ਬਚਣ ਲਈ ਕੌਂਸਟੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। [Vue.js](https://vuejs.org/) ਜਾਂ [React](https://reactjs.org/) ਵਰਗੇ ਫਰੇਮਵਰਕ ਤੁਹਾਨੂੰ ਆਪਣੇ ਕੋਡ ਨੂੰ ਕੇਂਦਰੀਕ੍ਰਿਤ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦੇ ਹਨ।

`const`, `let` ਅਤੇ `var` ਦੀ ਵਰਤੋਂ ਬਾਰੇ ਇੱਕ ਵੀਡੀਓ ਦੇਖਣ ਲਈ ਕੁਝ ਸਮਾਂ ਲਓ

[![ਵੈਰੀਏਬਲਾਂ ਦੇ ਪ੍ਰਕਾਰ](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "ਵੈਰੀਏਬਲਾਂ ਦੇ ਪ੍ਰਕਾਰ")

> 🎥 ਵੈਰੀਏਬਲਾਂ ਬਾਰੇ ਵੀਡੀਓ ਦੇਖਣ ਲਈ ਉੱਪਰ ਦਿੱਤੀ ਤਸਵੀਰ 'ਤੇ ਕਲਿੱਕ ਕਰੋ।

### ਸਟਾਰਟ ਲਾਜਿਕ ਸ਼ਾਮਲ ਕਰੋ

ਖੇਡ ਸ਼ੁਰੂ ਕਰਨ ਲਈ, ਖਿਡਾਰੀ ਸਟਾਰਟ 'ਤੇ ਕਲਿੱਕ ਕਰੇਗਾ। ਬੇਸ਼ੱਕ, ਸਾਨੂੰ ਇਹ ਨਹੀਂ ਪਤਾ ਕਿ ਉਹ ਸਟਾਰਟ 'ਤੇ ਕਦੋਂ ਕਲਿੱਕ ਕਰਨਗੇ। ਇਹੋ ਜਿੱਥੇ ਇੱਕ [ਇਵੈਂਟ ਲਿਸਨਰ](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) ਕੰਮ ਆਉਂਦਾ ਹੈ। ਇੱਕ ਇਵੈਂਟ ਲਿਸਨਰ ਸਾਨੂੰ ਕੁਝ ਹੋਣ (ਇਵੈਂਟ) ਦੀ ਉਡੀਕ ਕਰਨ ਅਤੇ ਜਵਾਬ ਵਿੱਚ ਕੋਡ ਚਲਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਸਾਡੇ ਮਾਮਲੇ ਵਿੱਚ, ਅਸੀਂ ਚਾਹੁੰਦੇ ਹਾਂ ਕਿ ਜਦੋਂ ਉਪਭੋਗਤਾ ਸਟਾਰਟ 'ਤੇ ਕਲਿੱਕ ਕਰੇ, ਤਾਂ ਕੋਡ ਚਲਾਇਆ ਜਾਵੇ।

ਜਦੋਂ ਉਪਭੋਗਤਾ **ਸਟਾਰਟ** 'ਤੇ ਕਲਿੱਕ ਕਰਦਾ ਹੈ, ਤਾਂ ਸਾਨੂੰ
## ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵਿਜ਼

[ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/22)

## ਸਮੀਖਿਆ ਅਤੇ ਖੁਦ ਅਧਿਐਨ

ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ ਰਾਹੀਂ ਡਿਵੈਲਪਰ ਲਈ ਉਪਲਬਧ [ਸਾਰੇ ਇਵੈਂਟਸ](https://developer.mozilla.org/docs/Web/Events) ਬਾਰੇ ਪੜ੍ਹੋ ਅਤੇ ਉਹਨਾਂ ਸਥਿਤੀਆਂ ਬਾਰੇ ਸੋਚੋ ਜਿੱਥੇ ਤੁਸੀਂ ਹਰ ਇੱਕ ਨੂੰ ਵਰਤੋਂਗੇ।

## ਅਸਾਈਨਮੈਂਟ

[ਨਵਾਂ ਕੀਬੋਰਡ ਗੇਮ ਬਣਾਓ](assignment.md)

---

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