<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "e982871b8388c59c22a41b73b5fca70f",
  "translation_date": "2025-08-26T01:06:42+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), Merriam-Webster ਦੇ ਅਨੁਸਾਰ, "ਕੁਝ ਜੋ ਹੁੰਦਾ ਹੈ" ਵਜੋਂ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ। ਇਹ ਸਾਡੇ ਹਾਲਾਤ ਨੂੰ ਬਿਲਕੁਲ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਵਰਣਨ ਕਰਦਾ ਹੈ। ਸਾਨੂੰ ਪਤਾ ਹੈ ਕਿ ਕੁਝ ਹੋਵੇਗਾ ਜਿਸ ਲਈ ਅਸੀਂ ਕੁਝ ਕੋਡ ਚਲਾਉਣਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਪਰ ਸਾਨੂੰ ਇਹ ਨਹੀਂ ਪਤਾ ਕਿ ਇਹ ਕਦੋਂ ਹੋਵੇਗਾ।

ਜਿਸ ਤਰੀਕੇ ਨਾਲ ਅਸੀਂ ਉਸ ਕੋਡ ਦੇ ਹਿੱਸੇ ਨੂੰ ਚਲਾਉਣਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਉਸਨੂੰ ਚਿੰਨ੍ਹਤ ਕਰਦੇ ਹਾਂ, ਉਹ ਹੈ ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਉਣਾ। ਜਦੋਂ ਅਸੀਂ [ਪ੍ਰੋਸੀਜਰਲ ਪ੍ਰੋਗਰਾਮਿੰਗ](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>
```

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

ਹਮੇਸ਼ਾ ਵਧੀਆ ਹੁੰਦਾ ਹੈ ਕਿ ਵਿਕਾਸ ਦੌਰਾਨ ਵੱਖ-ਵੱਖ ਪੜਾਅ 'ਤੇ ਦੇਖਿਆ ਜਾਵੇ ਕਿ ਚੀਜ਼ਾਂ ਕਿਵੇਂ ਲੱਗਦੀਆਂ ਹਨ। ਆਓ ਆਪਣੀ ਐਪਲੀਕੇਸ਼ਨ ਲਾਂਚ ਕਰੀਏ। Visual Studio Code ਲਈ ਇੱਕ ਸ਼ਾਨਦਾਰ ਐਕਸਟੈਂਸ਼ਨ ਹੈ [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) ਇੰਸਟਾਲ ਕਰੋ
  - ਬ੍ਰਾਊਜ਼ਰ ਤੁਹਾਨੂੰ Visual Studio Code ਖੋਲ੍ਹਣ ਲਈ ਕਹੇਗਾ, ਅਤੇ ਫਿਰ Visual Studio Code ਤੁਹਾਨੂੰ ਇੰਸਟਾਲ ਕਰਨ ਲਈ ਕਹੇਗਾ
  - ਜੇ ਲੋੜ ਹੋਵੇ, Visual Studio Code ਨੂੰ ਰੀਸਟਾਰਟ ਕਰੋ
- ਇੰਸਟਾਲ ਹੋਣ ਤੋਂ ਬਾਅਦ, Visual Studio Code ਵਿੱਚ 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) ਕੰਮ ਆਉਂਦਾ ਹੈ। ਇੱਕ ਇਵੈਂਟ ਲਿਸਨਰ ਸਾਨੂੰ ਕੁਝ ਹੋਣ (ਇਵੈਂਟ) ਦੀ ਉਡੀਕ ਕਰਨ ਅਤੇ ਇਸਦੇ ਜਵਾਬ ਵਿੱਚ ਕੋਡ ਚਲਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਸਾਡੇ ਮਾਮਲੇ ਵਿੱਚ, ਅਸੀਂ ਚਾਹੁੰਦੇ ਹਾਂ ਕਿ ਜਦੋਂ ਯੂਜ਼ਰ ਸ਼ੁਰੂ 'ਤੇ ਕਲਿਕ ਕਰੇ, ਤਾਂ ਕੋਡ ਚਲਾਇਆ ਜਾਵੇ।

ਜਦੋਂ ਯੂਜ਼ਰ **ਸ਼ੁਰੂ** 'ਤੇ ਕਲਿਕ ਕਰਦਾ ਹੈ, ਤਾਂ ਸਾਨੂੰ ਇੱਕ ਕੋਟ ਚੁਣਨਾ, ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਸੈਟਅੱਪ ਕਰਨਾ, ਅਤੇ ਮੌਜੂਦਾ ਸ਼ਬਦ ਅਤੇ ਸਮੇਂ ਦੀ ਟ੍ਰੈਕਿੰਗ ਸੈਟਅੱਪ ਕਰਨੀ ਹੈ। ਹੇਠਾਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ; ਅਸੀਂ ਇਸਨੂੰ ਸਕ੍ਰਿਪਟ ਬਲਾਕ ਤੋਂ ਬਾਅਦ ਚਰਚ
- [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਉੱਚੇ ਸਕੋਰ ਸਟੋਰ ਕਰੋ

## ਲੈਕਚਰ ਬਾਅਦ ਕਵਿਜ਼

[ਲੈਕਚਰ ਬਾਅਦ ਕਵਿਜ਼](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) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀਤਾ ਲਈ ਯਤਨਸ਼ੀਲ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।