43 KiB

Raw Blame History

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

ਕੀ ਤੁਸੀਂ ਕਦੇ ਸੋਚਿਆ ਹੈ ਕਿ ਵੈਬਸਾਈਟਾਂ ਨੂੰ ਕਿਵੇਂ ਪਤਾ ਲਗਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਬਟਨ 'ਤੇ ਕਲਿਕ ਕੀਤਾ ਜਾਂ ਟੈਕਸਟ ਬਾਕਸ ਵਿੱਚ ਟਾਈਪ ਕੀਤਾ? ਇਹ ਹੈ ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ ਦਾ ਜਾਦੂ! ਇਸ ਮਹੱਤਵਪੂਰਨ ਹੁਨਰ ਨੂੰ ਸਿੱਖਣ ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਤਰੀਕਾ ਹੈ ਕੁਝ ਉਪਯੋਗੀ ਬਣਾਉਣਾ - ਇੱਕ ਟਾਈਪਿੰਗ ਸਪੀਡ ਖੇਡ ਜੋ ਤੁਹਾਡੇ ਹਰ ਕੀ-ਸਟ੍ਰੋਕ 'ਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆ ਦਿੰਦੀ ਹੈ।

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

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

ਪ੍ਰੀ-ਲੈਕਚਰ ਕਵਿਜ਼

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

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

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

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

ਤਾਂ ਅਸਲ ਵਿੱਚ "ਇਵੈਂਟ" ਕੀ ਹੈ? ਸਧਾਰਨ ਤੌਰ 'ਤੇ, ਇਹ ਕੁਝ ਹੈ ਜੋ ਹੁੰਦਾ ਹੈ! ਜਦੋਂ ਤੁਸੀਂ ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰਦੇ ਹੋ - ਇਹ ਇੱਕ ਇਵੈਂਟ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਅੱਖਰ ਟਾਈਪ ਕਰਦੇ ਹੋ - ਇਹ ਇੱਕ ਇਵੈਂਟ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੀ ਮਾਊਸ ਨੂੰ ਹਿਲਾਉਂਦੇ ਹੋ - ਇਹ ਇੱਕ ਹੋਰ ਇਵੈਂਟ ਹੈ।

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

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

ਇਵੈਂਟ ਲਿਸਨਰ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ:

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

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

ਆਮ ਇਵੈਂਟਸ

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

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

ਇਵੈਂਟ	ਵੇਰਵਾ	ਆਮ ਵਰਤੋਂ ਦੇ ਕੇਸ
`click`	ਯੂਜ਼ਰ ਨੇ ਕੁਝ 'ਤੇ ਕਲਿਕ ਕੀਤਾ	ਬਟਨ, ਲਿੰਕ, ਇੰਟਰਐਕਟਿਵ ਐਲੀਮੈਂਟ
`contextmenu`	ਯੂਜ਼ਰ ਨੇ ਸੱਜੇ ਮਾਊਸ ਬਟਨ 'ਤੇ ਕਲਿਕ ਕੀਤਾ	ਕਸਟਮ ਰਾਈਟ-ਕਲਿਕ ਮੀਨੂ
`select`	ਯੂਜ਼ਰ ਨੇ ਕੁਝ ਟੈਕਸਟ ਹਾਈਲਾਈਟ ਕੀਤਾ	ਟੈਕਸਟ ਐਡਿਟਿੰਗ, ਕਾਪੀ ਓਪਰੇਸ਼ਨ
`input`	ਯੂਜ਼ਰ ਨੇ ਕੁਝ ਟੈਕਸਟ ਇਨਪੁਟ ਕੀਤਾ	ਫਾਰਮ ਵੈਲੀਡੇਸ਼ਨ, ਰੀਅਲ-ਟਾਈਮ ਖੋਜ

ਇਹ ਇਵੈਂਟ ਟਾਈਪਸ ਨੂੰ ਸਮਝਣਾ:

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

ਖੇਡ ਬਣਾਉਣਾ

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

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

flowchart TD
    A[Player clicks Start] --> B[Random quote displays]
    B --> C[Player types in textbox]
    C --> D{Word complete?}
    D -->|Yes| E[Highlight next word]
    D -->|No| F{Correct so far?}
    F -->|Yes| G[Keep normal styling]
    F -->|No| H[Show error styling]
    E --> I{Quote complete?}
    I -->|No| C
    I -->|Yes| J[Show success message with time]
    G --> C
    H --> C

ਇਹ ਹੈ ਕਿ ਸਾਡੀ ਖੇਡ ਕਿਵੇਂ ਕੰਮ ਕਰੇਗੀ:

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

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

ਫਾਈਲ ਸਟ੍ਰਕਚਰ

ਕੋਡਿੰਗ ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਚਲੋ ਸੁਧਰੇ ਹੋਏ ਬਣੀਅਾਦੀ ਬਣਤਰ ਬਣਾਈਏ! ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਸਾਫ ਸਟ੍ਰਕਚਰ ਹੋਣਾ ਤੁਹਾਨੂੰ ਬਾਅਦ ਵਿੱਚ ਸਿਰਦਰਦ ਤੋਂ ਬਚਾਏਗਾ ਅਤੇ ਤੁਹਾਡਾ ਪ੍ਰੋਜੈਕਟ ਹੋਰ ਪੇਸ਼ੇਵਰ ਬਣਾਏਗਾ। 😊

ਅਸੀਂ ਸਿਰਫ ਤਿੰਨ ਫਾਈਲਾਂ ਨਾਲ ਚੀਜ਼ਾਂ ਸਧਾਰਨ ਰੱਖਣ ਵਾਲੇ ਹਾਂ: index.html ਸਾਡੇ ਪੇਜ ਸਟ੍ਰਕਚਰ ਲਈ, script.js ਸਾਰੀ ਖੇਡ ਲਾਜਿਕ ਲਈ, ਅਤੇ style.css ਸਭ ਕੁਝ ਵਧੀਆ ਦਿਖਾਉਣ ਲਈ। ਇਹ ਹੈ ਕਲਾਸਿਕ ਤ੍ਰਿਓ ਜੋ ਵੈਬ ਦਾ ਜ਼ਿਆਦਾਤਰ ਹਿੱਸਾ ਤਾਕਤਵਾਨ ਬਣਾਉਂਦਾ ਹੈ!

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

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

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

ਇਹ ਕਮਾਂਡ ਕੀ ਕਰਦੀਆਂ ਹਨ:

ਨਵਾਂ ਡਾਇਰੈਕਟਰੀ ਬਣਾਉਂਦੀਆਂ ਹਨ ਜਿਸਨੂੰ typing-game ਕਿਹਾ ਜਾਂਦਾ ਹੈ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਫਾਈਲਾਂ ਲਈ
ਆਪਣੇ ਆਪ ਨਵੀਂ ਬਣਾਈ ਗਈ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਜਾ ਰਹੀਆਂ ਹਨ
ਤੁਹਾਡੇ ਖੇਡ ਵਿਕਾਸ ਲਈ ਸਾਫ ਵਰਕਸਪੇਸ ਸੈਟ ਕਰਦੀਆਂ ਹਨ

Visual Studio Code ਖੋਲ੍ਹੋ:

code .

ਇਹ ਕਮਾਂਡ:

Visual Studio Code ਨੂੰ ਮੌਜੂਦਾ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਲਾਂਚ ਕਰਦੀ ਹੈ
ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਨੂੰ ਐਡੀਟਰ ਵਿੱਚ ਖੋਲ੍ਹਦੀ ਹੈ
ਤੁਹਾਨੂੰ ਸਾਰੇ ਵਿਕਾਸ ਟੂਲਾਂ ਤੱਕ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ

Visual Studio Code ਵਿੱਚ ਫੋਲਡਰ ਵਿੱਚ ਹੇਠਾਂ ਦਿੱਤੇ ਨਾਮਾਂ ਨਾਲ ਤਿੰਨ ਫਾਈਲਾਂ ਸ਼ਾਮਲ ਕਰੋ:

index.html - ਤੁਹਾਡੀ ਖੇਡ ਦੀ ਬਣਤਰ ਅਤੇ ਸਮੱਗਰੀ ਨੂੰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ
script.js - ਸਾਰੀ ਖੇਡ ਲਾਜਿਕ ਅਤੇ ਇਵੈਂਟ ਲਿਸਨਰ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ
style.css - ਵਿਜ਼ੂਅਲ ਦਿੱਖ ਅਤੇ ਸਟਾਈਲਿੰਗ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ

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

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

ਚਲੋ ਪਤਾ ਕਰੀਏ ਕਿ ਸਾਡੀ ਖੇਡ ਨੂੰ ਅਸਲ ਵਿੱਚ ਕੀ ਚਾਹੀਦਾ ਹੈ। ਜੇ ਤੁਸੀਂ ਇੱਕ ਟਾਈਪਿੰਗ ਖੇਡ ਖੇਡ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਸਕ੍ਰੀਨ 'ਤੇ ਕੀ ਦੇਖਣਾ ਚਾਹੁੰਦੇ ਹੋ? ਇੱਥੇ ਹੈ ਜੋ ਸਾਨੂੰ ਚਾਹੀਦਾ ਹੈ:

ਯੂਆਈ ਐਲੀਮੈਂਟ	ਉਦੇਸ਼	HTML ਐਲੀਮੈਂਟ
ਕੋਟ ਡਿਸਪਲੇ	ਟਾਈਪ ਕਰਨ ਲਈ ਟੈਕਸਟ ਦਿਖਾਉਂਦਾ ਹੈ	`<p>` ਜਿਸਦਾ `id="quote"` ਹੈ
ਮੈਸੇਜ ਏਰੀਆ	ਸਥਿਤੀ ਅਤੇ ਸਫਲਤਾ ਦੇ ਸੁਨੇਹੇ ਦਿਖਾਉਂਦਾ ਹੈ	`<p>` ਜਿਸਦਾ `id="message"` ਹੈ
ਟੈਕਸਟ ਇਨਪੁਟ	ਜਿੱਥੇ ਖਿਡਾਰੀ ਕੋਟ ਟਾਈਪ ਕਰਦੇ ਹਨ	`<input>` ਜਿਸਦਾ `id="typed-value"` ਹੈ
ਸਟਾਰਟ ਬਟਨ	ਖੇਡ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ	`<button>` ਜਿਸਦਾ `id="start"` ਹੈ

ਯੂਆਈ ਸਟ੍ਰਕਚਰ ਨੂੰ ਸਮਝਣਾ:

ਸਮੱਗਰੀ ਨੂੰ ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ ਉੱਤੋਂ ਹੇਠਾਂ ਤੱਕ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ

ਸਾਨੂੰ ਆਪਣੇ UI ਐਲੀਮੈਂਟਸ ਲਈ ਹਵਾਲੇ ਦੀ ਲੋੜ ਹੋਵੇਗੀ:

ਐਲੀਮੈਂਟ	ID	ਉਦੇਸ਼
ਟੈਕਸਟ ਇਨਪੁਟ	`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');

ਇਸ ਸੈਟਅਪ ਕੋਡ ਨਾਲ ਕੀ ਹਾਸਲ ਹੁੰਦਾ ਹੈ:

ਸਟੋਰ ਕਰਦਾ ਹੈ Sherlock Holmes ਦੀਆਂ ਕੋਟਸ ਦੀ ਐਰੇ const ਨਾਲ ਕਿਉਂਕਿ ਕੋਟਸ ਨਹੀਂ ਬਦਲਣਗੀਆਂ
ਟ੍ਰੈਕਿੰਗ ਵੈਰੀਏਬਲਸ ਨੂੰ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ let ਨਾਲ ਕਿਉਂਕਿ ਇਹ ਮੁੱਲ ਖੇਡ ਦੌਰਾਨ ਅੱਪਡੇਟ ਹੋਣਗੇ
DOM ਐਲੀਮੈਂਟਸ ਦੇ ਹਵਾਲੇ ਪਕੜਦਾ ਹੈ document.getElementById() ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤੇਜ਼ ਪਹੁੰਚ ਲਈ
ਸਾਰਾ ਖੇਡ ਫੰਕਸ਼ਨਾਲਿਟੀ ਦਾ ਅਧਾਰ ਸੈਟ ਕਰਦਾ ਹੈ ਸਪਸ਼ਟ ਅਤੇ ਵਰਣਨਾਤਮਕ ਵੈਰੀਏਬਲ ਨਾਂਵਾਂ ਨਾਲ
ਲਾਜ਼ਮੀ ਡਾਟਾ ਅਤੇ ਐਲੀਮੈਂਟਸ ਨੂੰ ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ ਕੋਡ ਦੇ ਰੱਖ-ਰਖਾਅ ਨੂੰ ਆਸਾਨ ਬਣਾਉਣ ਲਈ

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

💡 ਪ੍ਰੋ ਟਿਪ: ਅਸੀਂ document.getElementById() ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਜਦੋਂ ਚਾਹੀਏ ਐਲੀਮੈਂਟਸ ਨੂੰ ਰੀਟਰੀਵ ਕਰ ਸਕਦੇ ਹਾਂ। ਕਿਉਂਕਿ ਅਸੀਂ ਇਹ ਐਲੀਮੈਂਟਸ ਨੂੰ ਬਾਰ-ਬਾਰ ਹਵਾਲਾ ਦੇਣ ਜਾ ਰਹੇ ਹਾਂ, ਅਸੀਂ ਸਟ੍ਰਿੰਗ ਲਿਟਰਲਸ ਵਿੱਚ ਟਾਈਪੋਜ਼ ਤੋਂ ਬਚਣ ਜਾ ਰਹੇ ਹਾਂ। Vue.js ਜਾਂ React ਵਰਗੇ ਫਰੇਮਵਰਕ ਤੁਹਾਨੂੰ ਆਪਣੇ ਕੋਡ ਨੂੰ ਕੇਂਦਰੀਕਰਣ ਵਿੱਚ ਬਿਹਤਰ ਮਦਦ ਕਰ ਸਕਦੇ ਹਨ।

ਇਹ ਪਹੁੰਚ ਕਿਉਂ ਬਹੁਤ ਵਧੀਆ ਕੰਮ ਕਰਦੀ ਹੈ:

ਸਪੈਲਿੰਗ ਗਲਤੀਆਂ ਨੂੰ ਰੋਕਦੀ ਹੈ ਜਦੋਂ ਐਲੀਮੈਂਟਸ ਨੂੰ ਬਾਰ-ਬਾਰ ਹਵਾਲਾ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ
ਕੋਡ ਪੜ੍ਹਨ ਯੋਗਤਾ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦੀ ਹੈ ਵਰਣਨਾਤਮਕ ਕਾਂਸਟੈਂਟ ਨਾਂਵਾਂ ਨਾਲ
IDE ਸਹਾਇਤਾ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦੀ ਹੈ ਆਟੋਕੰਪਲੀਟ ਅਤੇ ਗਲਤੀ ਚੈੱਕਿੰਗ ਨਾਲ
ਰਿਫੈਕਟੋਰਿੰਗ ਨੂੰ ਆਸਾਨ ਬਣਾਉਂਦੀ ਹੈ ਜੇਕਰ ਐਲੀਮੈਂਟ ID ਬਾਅਦ ਵਿੱਚ ਬਦਲਦੇ ਹਨ

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

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

ਸ਼ੁਰੂਆਤ ਲੌਜਿਕ ਸ਼ਾਮਲ ਕਰੋ

ਇਥੇ ਸਭ ਕੁਝ ਸਹੀ ਹੋ ਜਾਂਦਾ ਹੈ! 🚀 ਤੁਸੀਂ ਆਪਣਾ ਪਹਿਲਾ ਅਸਲ ਇਵੈਂਟ ਲਿਸਨਰ ਲਿਖਣ ਜਾ ਰਹੇ ਹੋ, ਅਤੇ ਇਹ ਦੇਖਣ ਵਿੱਚ ਕਾਫ਼ੀ ਸੰਤੋਸ਼ਜਨਕ ਹੈ ਕਿ ਤੁਹਾਡਾ ਕੋਡ ਬਟਨ ਕਲਿਕ ਕਰਨ 'ਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆ ਦਿੰਦਾ ਹੈ।

ਇਸ ਬਾਰੇ ਸੋਚੋ: ਕਿਤੇ ਨਾ ਕਿਤੇ, ਇੱਕ ਖਿਡਾਰੀ ਉਹ "ਸ਼ੁਰੂ" ਬਟਨ ਕਲਿਕ ਕਰਨ ਜਾ ਰਿਹਾ ਹੈ, ਅਤੇ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਉਸ ਲਈ ਤਿਆਰ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਸਾਨੂੰ ਕੋਈ ਅੰਦਾਜ਼ਾ ਨਹੀਂ ਕਿ ਉਹ ਕਦੋਂ ਕਲਿਕ ਕਰਨਗੇ - ਤੁਰੰਤ, ਜਾਂ ਕੌਫੀ ਪੀਣ ਤੋਂ ਬਾਅਦ - ਪਰ ਜਦੋਂ ਉਹ ਕਰਦੇ ਹਨ, ਤੁਹਾਡੀ ਖੇਡ ਜਿੰਦਗੀ ਵਿੱਚ ਆਉਂਦੀ ਹੈ।

ਜਦੋਂ ਯੂਜ਼ਰ start ਕਲਿਕ ਕਰਦਾ ਹੈ, ਸਾਨੂੰ ਇੱਕ ਕੋਟ ਚੁਣਨ ਦੀ ਲੋੜ ਹੈ, ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਸੈਟਅਪ ਕਰਨਾ ਹੈ, ਅਤੇ ਮੌਜੂਦਾ ਸ਼ਬਦ ਅਤੇ ਸਮੇਂ ਲਈ ਟ੍ਰੈਕਿੰਗ ਸੈਟਅਪ ਕਰਨੀ ਹੈ। ਹੇਠਾਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ; ਅਸੀਂ ਇਸ ਨੂੰ ਸਕ੍ਰਿਪਟ ਬਲਾਕ ਤੋਂ ਬਾਅਦ ਚਰਚਾ ਕਰਦੇ ਹਾਂ।

// at the end of script.js
document.getElementById('start').addEventListener('click', () => {
  // get a quote
  const quoteIndex = Math.floor(Math.random() * quotes.length);
  const quote = quotes[quoteIndex];
  // Put the quote into an array of words
  words = quote.split(' ');
  // reset the word index for tracking
  wordIndex = 0;

  // UI updates
  // Create an array of span elements so we can set a class
  const spanWords = words.map(function(word) { return `<span>${word} </span>`});
  // Convert into string and set as innerHTML on quote display
  quoteElement.innerHTML = spanWords.join('');
  // Highlight the first word
  quoteElement.childNodes[0].className = 'highlight';
  // Clear any prior messages
  messageElement.innerText = '';

  // Setup the textbox
  // Clear the textbox
  typedValueElement.value = '';
  // set focus
  typedValueElement.focus();
  // set the event handler

  // Start the timer
  startTime = new Date().getTime();
});

ਕੋਡ ਨੂੰ ਲਾਜ਼ਮੀ ਭਾਗਾਂ ਵਿੱਚ ਤੋੜਨਾ:

📊 ਸ਼ਬਦ ਟ੍ਰੈਕਿੰਗ ਸੈਟਅਪ:

ਚੁਣਦਾ ਹੈ ਇੱਕ ਰੈਂਡਮ ਕੋਟ Math.floor() ਅਤੇ Math.random() ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੱਖ-ਵੱਖਤਾ ਲਈ
ਕੋਟ ਨੂੰ ਤਬਦੀਲ ਕਰਦਾ ਹੈ ਇੱਕ ਅਲੱਗ-ਅਲੱਗ ਸ਼ਬਦਾਂ ਦੀ ਐਰੇ ਵਿੱਚ split(' ') ਦੀ ਵਰਤੋਂ ਕਰਕੇ
wordIndex ਨੂੰ 0 'ਤੇ ਰੀਸੈਟ ਕਰਦਾ ਹੈ ਕਿਉਂਕਿ ਖਿਡਾਰੀ ਪਹਿਲੇ ਸ਼ਬਦ ਨਾਲ ਸ਼ੁਰੂ ਕਰਦੇ ਹਨ
ਖੇਡ ਦੀ ਸਥਿਤੀ ਨੂੰ ਤਿਆਰ ਕਰਦਾ ਹੈ ਇੱਕ ਨਵੀਂ ਰਾਊਂਡ ਲਈ

🎨 UI ਸੈਟਅਪ ਅਤੇ ਡਿਸਪਲੇ:

ਬਣਾਉਂਦਾ ਹੈ <span> ਐਲੀਮੈਂਟਸ ਦੀ ਇੱਕ ਐਰੇ, ਹਰ ਸ਼ਬਦ ਨੂੰ ਵਿਅਕਤੀਗਤ ਸਟਾਈਲਿੰਗ ਲਈ ਲਪੇਟਦਾ ਹੈ
ਸਪੈਨ ਐਲੀਮੈਂਟਸ ਨੂੰ ਜੋੜਦਾ ਹੈ ਇੱਕ ਸਿੰਗਲ ਸਟ੍ਰਿੰਗ ਵਿੱਚ DOM ਅੱਪਡੇਟਿੰਗ ਲਈ
ਪਹਿਲੇ ਸ਼ਬਦ ਨੂੰ ਹਾਈਲਾਈਟ ਕਰਦਾ ਹੈ CSS ਕਲਾਸ highlight ਸ਼ਾਮਲ ਕਰਕੇ
ਪਿਛਲੇ ਖੇਡ ਸੁਨੇਹੇ ਸਾਫ ਕਰਦਾ ਹੈ ਇੱਕ ਸਾਫ ਸਲੇਟ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ

⌨️ ਟੈਕਸਟਬਾਕਸ ਤਿਆਰੀ:

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

⏱️ ਟਾਈਮਰ ਸ਼ੁਰੂਆਤ:

ਮੌਜੂਦਾ ਟਾਈਮਸਟੈਂਪ ਪਕੜਦਾ ਹੈ new Date().getTime() ਦੀ ਵਰਤੋਂ ਕਰਕੇ
ਟਾਈਪਿੰਗ ਸਪੀਡ ਅਤੇ ਪੂਰਨ ਸਮੇਂ ਦੀ ਸਹੀ ਗਿਣਤੀ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ
ਖੇਡ ਸੈਸ਼ਨ ਲਈ ਪ੍ਰਦਰਸ਼ਨ ਟ੍ਰੈਕਿੰਗ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ

ਟਾਈਪਿੰਗ ਲੌਜਿਕ ਸ਼ਾਮਲ ਕਰੋ

ਇਥੇ ਅਸੀਂ ਆਪਣੀ ਖੇਡ ਦੇ ਦਿਲ ਨੂੰ ਹੱਲ ਕਰਦੇ ਹਾਂ! ਚਿੰਤਾ ਨਾ ਕਰੋ ਜੇ ਇਹ ਪਹਿਲਾਂ ਕੁਝ ਜ਼ਿਆਦਾ ਲੱਗਦਾ ਹੈ - ਅਸੀਂ ਹਰ ਹਿੱਸੇ ਨੂੰ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸਮਝਾਵਾਂਗੇ, ਅਤੇ ਅੰਤ ਵਿੱਚ, ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਇਹ ਸਾਰਾ ਕਿੰਨਾ ਤਰਕਸੰਗਤ ਹੈ।

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

// at the end of script.js
typedValueElement.addEventListener('input', () => {
  // Get the current word
  const currentWord = words[wordIndex];
  // get the current value
  const typedValue = typedValueElement.value;

  if (typedValue === currentWord && wordIndex === words.length - 1) {
    // end of sentence
    // Display success
    const elapsedTime = new Date().getTime() - startTime;
    const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
    messageElement.innerText = message;
  } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
    // end of word
    // clear the typedValueElement for the new word
    typedValueElement.value = '';
    // move to the next word
    wordIndex++;
    // reset the class name for all elements in quote
    for (const wordElement of quoteElement.childNodes) {
      wordElement.className = '';
    }
    // highlight the new word
    quoteElement.childNodes[wordIndex].className = 'highlight';
  } else if (currentWord.startsWith(typedValue)) {
    // currently correct
    // highlight the next word
    typedValueElement.className = '';
  } else {
    // error state
    typedValueElement.className = 'error';
  }
});

ਟਾਈਪਿੰਗ ਲੌਜਿਕ ਫਲੋ ਨੂੰ ਸਮਝਣਾ:

ਇਹ ਫੰਕਸ਼ਨ ਇੱਕ ਵਾਟਰਫਾਲ ਪਹੁੰਚ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਜੋ ਕਿ ਸਭ ਤੋਂ ਵਿਸ਼ੇਸ਼ ਤੋਂ ਸਭ ਤੋਂ ਆਮ ਹਾਲਤਾਂ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ। ਆਓ ਹਰ ਸਥਿਤੀ ਨੂੰ ਤੋੜ ਕੇ ਸਮਝੀਏ:

flowchart TD
    A[Player types character] --> B[Get current word and typed value]
    B --> C{Quote complete?}
    C -->|Yes| D[Show completion message with time]
    C -->|No| E{Word complete with space?}
    E -->|Yes| F[Clear input, move to next word, update highlight]
    E -->|No| G{Typing correctly so far?}
    G -->|Yes| H[Remove error styling]
    G -->|No| I[Show error styling]

🏁 ਕੋਟ ਪੂਰਾ (ਸਥਿਤੀ 1):

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

✅ ਸ਼ਬਦ ਪੂਰਾ (ਸਥਿਤੀ 2):

ਪਛਾਣਦਾ ਹੈ ਜਦੋਂ ਇਨਪੁਟ ਖਤਮ ਹੁੰਦਾ ਹੈ ਇੱਕ ਸਪੇਸ ਨਾਲ
ਪੱਕਾ ਕਰਦਾ ਹੈ ਕਿ ਟ੍ਰਿਮ ਕੀਤੀ ਇਨਪੁਟ ਮੌਜੂਦਾ ਸ਼ਬਦ ਨਾਲ ਸਹੀ ਤੌਰ 'ਤੇ ਮਿਲਦੀ ਹੈ
ਇਨਪੁਟ ਖੇਤਰ ਸਾਫ ਕਰਦਾ ਹੈ ਅਗਲੇ ਸ਼ਬਦ ਲਈ
ਅਗਲੇ ਸ਼ਬਦ 'ਤੇ ਅੱਗੇ ਵਧਦਾ ਹੈ wordIndex ਨੂੰ ਵਧਾ ਕੇ
ਦ੍ਰਿਸ਼ਮਾਨ ਹਾਈਲਾਈਟਿੰਗ ਅੱਪਡੇਟ ਕਰਦਾ ਹੈ ਸਾਰੀਆਂ ਕਲਾਸਾਂ ਨੂੰ ਹਟਾ ਕੇ ਅਤੇ ਨਵੇਂ ਸ਼ਬਦ ਨੂੰ ਹਾਈਲਾਈਟ ਕਰਕੇ

📝 ਟਾਈਪਿੰਗ ਜਾਰੀ ਹੈ (ਸਥਿਤੀ 3):

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

❌ ਗਲਤੀ ਸਥਿਤੀ (ਸਥਿਤੀ 4):

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

ਆਪਣੀ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਜਾਂਚ ਕਰੋ

ਦੇਖੋ ਤੁਸੀਂ ਕੀ ਹਾਸਲ ਕੀਤਾ! 🎉 ਤੁਸੀਂ ਹੁਣੇ ਹੀ ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਅਸਲ, ਕੰਮ ਕਰਨ ਵਾਲੀ ਟਾਈਪਿੰਗ ਖੇਡ ਬਣਾਈ। ਇਸ ਨੂੰ ਮੰਨਣ ਲਈ ਇੱਕ ਪਲ ਲਓ - ਇਹ ਕੋਈ ਛੋਟਾ ਕਾਰਨਾਮਾ ਨਹੀਂ ਹੈ!

ਹੁਣ ਜਾਂਚ ਦਾ ਦੌਰ ਆਉਂਦਾ ਹੈ! ਕੀ ਇਹ ਉਮੀਦ ਦੇ ਅਨੁਸਾਰ ਕੰਮ ਕਰੇਗੀ? ਕੀ ਅਸੀਂ ਕੁਝ ਛੱਡ ਦਿੱਤਾ? ਗੱਲ ਇਹ ਹੈ: ਜੇ ਕੁਝ ਤੁਰੰਤ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਨਹੀਂ ਕਰਦਾ, ਤਾਂ ਇਹ ਬਿਲਕੁਲ ਸਧਾਰਨ ਹੈ। ਅਨੁਭਵੀ ਡਿਵੈਲਪਰ ਵੀ ਆਪਣੇ ਕੋਡ ਵਿੱਚ ਨਿਯਮਿਤ ਤੌਰ 'ਤੇ ਬੱਗਸ ਪਾਉਂਦੇ ਹਨ। ਇਹ ਸਾਰੇ ਵਿਕਾਸ ਪ੍ਰਕਿਰਿਆ ਦਾ ਹਿੱਸਾ ਹੈ!

start 'ਤੇ ਕਲਿਕ ਕਰੋ, ਅਤੇ ਟਾਈਪ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰੋ! ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ ਜਿਵੇਂ ਅਸੀਂ ਪਹਿਲਾਂ ਐਨੀਮੇਸ਼ਨ ਵਿੱਚ ਦੇਖਿਆ ਸੀ।

ਆਪਣੀ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਕੀ ਜਾਂਚਣਾ ਹੈ:

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

ਆਮ ਡੀਬੱਗਿੰਗ ਟਿਪਸ:

ਜਾਂਚੋ ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ (F12) ਵਿੱਚ ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਲਤੀਆਂ ਲਈ
ਪੱਕਾ ਕਰੋ ਕਿ ਸਾਰੇ ਫਾਈਲ ਨਾਂਵ ਬਿਲਕੁਲ ਮਿਲਦੇ ਹਨ (ਕੇਸ-ਸੈਂਸਿਟਿਵ)
ਪੱਕਾ ਕਰੋ ਕਿ Live Server ਚੱਲ ਰਿਹਾ ਹੈ ਅਤੇ ਸਹੀ ਤੌਰ 'ਤੇ ਰਿਫ੍ਰੈਸ਼ ਹੋ ਰਿਹਾ ਹੈ
ਵੱਖ-ਵੱਖ ਕੋਟਸ ਟੈਸਟ ਕਰੋ ਇਹ ਪੱਕਾ ਕਰਨ ਲਈ ਕਿ ਰੈਂਡਮ ਚੋਣ ਸਹੀ ਕੰਮ ਕਰਦੀ ਹੈ

GitHub Copilot Agent Challenge 🎮

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

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

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

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

ਜਰੂਰੀ HTML ਐਲੀਮੈਂਟਸ, CSS ਸਟਾਈਲਸ, ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ ਇਸ ਫੀਚਰ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ। ਸਹੀ ਗਲਤੀ

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

43 KiB Raw Blame History