Web-Dev-For-Beginners/translations/pa/4-typing-game/typing-game

ਖੇਡ ਬਣਾਉਣਾ ਇਵੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ

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

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

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

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

ਇਵੈਂਟ ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ ਉਹ ਪ੍ਰੋਗਰਾਮਿੰਗ ਦੀ ਕਿਸਮ ਹੈ ਜਿਸਦੀ ਸਾਨੂੰ ਆਪਣਾ GUI ਬਣਾਉਣ ਲਈ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਜੇਕਰ ਅਸੀਂ ਇਸ ਵਾਕ ਨੂੰ ਥੋੜਾ ਜਿਹਾ ਤੋੜੀਏ, ਤਾਂ ਅਸੀਂ ਵੇਖਦੇ ਹਾਂ ਕਿ ਇੱਥੇ ਮੁੱਖ ਸ਼ਬਦ ਇਵੈਂਟ ਹੈ। ਇਵੈਂਟ, Merriam-Webster ਦੇ ਅਨੁਸਾਰ, "ਕੁਝ ਜੋ ਹੁੰਦਾ ਹੈ" ਵਜੋਂ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ। ਇਹ ਸਥਿਤੀ ਸਾਡੇ ਲਈ ਬਿਲਕੁਲ ਸਹੀ ਹੈ। ਸਾਨੂੰ ਪਤਾ ਹੈ ਕਿ ਕੁਝ ਹੋਣ ਵਾਲਾ ਹੈ ਜਿਸ ਲਈ ਅਸੀਂ ਕੁਝ ਕੋਡ ਨੂੰ ਅਮਲ ਵਿੱਚ ਲਾਉਣਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਪਰ ਸਾਨੂੰ ਇਹ ਨਹੀਂ ਪਤਾ ਕਿ ਇਹ ਕਦੋਂ ਹੋਵੇਗਾ।

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

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

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

ਆਮ ਇਵੈਂਟਸ

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

• click: ਉਪਭੋਗਤਾ ਨੇ ਕੁਝ 'ਤੇ ਕਲਿਕ ਕੀਤਾ, ਆਮ ਤੌਰ 'ਤੇ ਇੱਕ ਬਟਨ ਜਾਂ ਹਾਇਪਰਲਿੰਕ
• contextmenu: ਉਪਭੋਗਤਾ ਨੇ ਸੱਜੇ ਮਾਊਸ ਬਟਨ 'ਤੇ ਕਲਿਕ ਕੀਤਾ
• select: ਉਪਭੋਗਤਾ ਨੇ ਕੁਝ ਟੈਕਸਟ ਹਾਈਲਾਈਟ ਕੀਤਾ
• input: ਉਪਭੋਗਤਾ ਨੇ ਕੁਝ ਟੈਕਸਟ ਇਨਪੁਟ ਕੀਤਾ

ਖੇਡ ਬਣਾਉਣਾ

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

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

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

ਫਾਈਲ ਸਟ੍ਰਕਚਰ

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

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

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

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

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

code .

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

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

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

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

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

index.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 ਕਿਹਾ ਜਾਂਦਾ ਹੈ, ਜੋ ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਹੋਸਟ ਕਰੇਗਾ ਅਤੇ ਹਰ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਸੇਵ ਕਰੋਗੇ, ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਰੀਫ੍ਰੈਸ਼ ਕਰੇਗਾ।

• Live Server ਨੂੰ ਇੰਸਟਾਲ ਕਰੋ। ਲਿੰਕ 'ਤੇ ਕਲਿਕ ਕਰੋ ਅਤੇ Install 'ਤੇ ਕਲਿਕ ਕਰੋ।
  • ਬ੍ਰਾਊਜ਼ਰ ਤੁਹਾਨੂੰ ਵਿਜ਼ੁਅਲ ਸਟੂਡੀਓ ਕੋਡ ਖੋਲ੍ਹਣ ਲਈ ਕਹੇਗਾ, ਅਤੇ ਫਿਰ ਵਿਜ਼ੁਅਲ ਸਟੂਡੀਓ ਕੋਡ ਤੁਹਾਨੂੰ ਇੰਸਟਾਲ ਕਰਨ ਲਈ ਕਹੇਗਾ।
  • ਜੇਕਰ ਲੋੜ ਹੋਵੇ, ਤਾਂ ਵਿਜ਼ੁਅਲ ਸਟੂਡੀਓ ਕੋਡ ਨੂੰ ਰੀਸਟਾਰਟ ਕਰੋ।
• ਇੰਸਟਾਲ ਹੋਣ ਤੋਂ ਬਾਅਦ, ਵਿਜ਼ੁਅਲ ਸਟੂਡੀਓ ਕੋਡ ਵਿੱਚ, Ctrl-Shift-P (ਜਾਂ Cmd-Shift-P) ਦਬਾਓ ਤਾਂ ਜੋ ਕਮਾਂਡ ਪੈਲੇਟ ਖੁੱਲ ਜਾਵੇ।
• Live Server: Open with Live Server ਟਾਈਪ ਕਰੋ।
  • Live Server ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਹੋਸਟ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰੇਗਾ।
• ਬ੍ਰਾਊਜ਼ਰ ਖੋਲ੍ਹੋ ਅਤੇ https://localhost:5500 'ਤੇ ਜਾਓ।
• ਹੁਣ ਤੁਹਾਨੂੰ ਉਹ ਪੇਜ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਬਣਾਇਆ ਹੈ!

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

CSS ਸ਼ਾਮਲ ਕਰੋ

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

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

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

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

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

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

ਜਾਵਾਸਕ੍ਰਿਪਟ

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

• ਕੌਂਸਟੈਂਟਸ ਬਣਾਓ
• ਖੇਡ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਇਵੈਂਟ ਲਿਸਨਰ
• ਟਾਈਪਿੰਗ ਲਈ ਇਵੈਂਟ ਲਿਸਨਰ

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

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

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

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

ਅਸੀਂ UI ਤੱਤਾਂ ਦੇ ਹਵਾਲੇ ਵੀ ਚਾਹੁੰਦੇ ਹਾਂ:

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

// 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 ਜਾਂ React ਵਰਗੇ ਫਰੇਮਵਰਕ ਤੁਹਾਨੂੰ ਆਪਣੇ ਕੋਡ ਨੂੰ ਕੇਂਦਰੀਕਰਣ ਵਿੱਚ ਬਿਹਤਰ ਪ੍ਰਬੰਧਨ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦੇ ਹਨ।

const, let ਅਤੇ var ਦੀ ਵਰਤੋਂ ਬਾਰੇ ਇੱਕ ਵੀਡੀਓ ਦੇਖਣ ਲਈ ਇੱਕ ਮਿੰਟ ਲਓ।

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

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

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

ਪ੍ਰੇਰਨਾ: ਟਾਈਪਿੰਗ ਗੇਮ ਲਈ ਇੱਕ ਮੁਸ਼ਕਲਤਾ ਸਮਰਥਨ ਪ੍ਰਣਾਲੀ ਬਣਾਓ ਜੋ:

1. ਖਿਡਾਰੀ ਦੀ ਟਾਈਪਿੰਗ ਸਪੀਡ (ਸ਼ਬਦ ਪ੍ਰਤੀ ਮਿੰਟ) ਅਤੇ ਸ਼ੁੱਧਤਾ ਪ੍ਰਤੀਸ਼ਤ ਨੂੰ ਟ੍ਰੈਕ ਕਰਦੀ ਹੈ
2. ਤਿੰਨ ਮੁਸ਼ਕਲਤਾ ਪੱਧਰਾਂ 'ਤੇ ਸਵੈਚਾਲਿਤ ਤੌਰ 'ਤੇ ਸਮਰਥਨ ਕਰਦੀ ਹੈ: ਆਸਾਨ (ਸਧਾਰਨ quotes), ਮੱਧਮ (ਮੌਜੂਦਾ quotes), ਮੁਸ਼ਕਲ (ਜਟਿਲ quotes ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਪੰਕਚੁਏਸ਼ਨ ਸ਼ਾਮਲ ਹੈ)
3. ਮੌਜੂਦਾ ਮੁਸ਼ਕਲਤਾ ਪੱਧਰ ਅਤੇ ਖਿਡਾਰੀ ਦੇ ਅੰਕੜੇ UI 'ਤੇ ਦਿਖਾਉਂਦੀ ਹੈ
4. ਇੱਕ streak counter ਲਾਗੂ ਕਰਦੀ ਹੈ ਜੋ 3 ਲਗਾਤਾਰ ਚੰਗੇ ਪ੍ਰਦਰਸ਼ਨ ਤੋਂ ਬਾਅਦ ਮੁਸ਼ਕਲਤਾ ਵਧਾਉਂਦੀ ਹੈ
5. ਮੁਸ਼ਕਲਤਾ ਬਦਲਣ ਦੇ ਸੰਕੇਤ ਦੇਣ ਲਈ ਵਿਜ਼ੂਅਲ ਫੀਡਬੈਕ (ਰੰਗ, ਐਨੀਮੇਸ਼ਨ) ਸ਼ਾਮਲ ਕਰਦੀ ਹੈ

ਇਸ ਫੀਚਰ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਜ਼ਰੂਰੀ HTML ਤੱਤ, CSS ਸ਼ੈਲੀਆਂ, ਅਤੇ JavaScript ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ। ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਗਲਤੀ ਸੰਭਾਲਣ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਖੇਡ ARIA ਲੇਬਲਾਂ ਨਾਲ ਪਹੁੰਚਯੋਗ ਰਹੇ।

🚀 ਚੁਣੌਤੀ

ਹੋਰ ਫੰਕਸ਼ਨਲਿਟੀ ਸ਼ਾਮਲ ਕਰੋ

• input ਇਵੈਂਟ ਲਿਸਨਰ ਨੂੰ ਪੂਰਨ ਹੋਣ 'ਤੇ ਅਯੋਗ ਕਰੋ, ਅਤੇ ਬਟਨ ਕਲਿਕ ਕਰਨ 'ਤੇ ਮੁੜ ਯੋਗ ਕਰੋ
• ਜਦੋਂ ਖਿਡਾਰੀ quote ਪੂਰਾ ਕਰ ਲੈਂਦਾ ਹੈ ਤਾਂ ਟੈਕਸਟਬਾਕਸ ਨੂੰ ਅਯੋਗ ਕਰੋ
• ਸਫਲਤਾ ਸੁਨੇਹੇ ਨਾਲ ਇੱਕ ਮੋਡਲ ਡਾਇਲਾਗ ਬਾਕਸ ਦਿਖਾਓ
• localStorage ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਉੱਚ ਸਕੋਰ ਸਟੋਰ ਕਰੋ

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

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

ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ ਅਧਿਐਨ

ਸਾਰੇ ਇਵੈਂਟ ਬਾਰੇ ਪੜ੍ਹੋ ਜੋ ਡਿਵੈਲਪਰ ਨੂੰ ਵੈਬ ਬ੍ਰਾਊਜ਼ਰ ਦੁਆਰਾ ਉਪਲਬਧ ਹਨ, ਅਤੇ ਉਹ ਸਥਿਤੀਆਂ ਵਿਚਾਰੋ ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਤੁਸੀਂ ਹਰ ਇੱਕ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ।

ਅਸਾਈਨਮੈਂਟ

ਨਵੀਂ ਕੀਬੋਰਡ ਗੇਮ ਬਣਾਓ

---

ਅਸਵੀਕਰਤੀ:
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਅਸੀਂ ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।