` ਜਿਸਦਾ `id="quote"` ਹੈ | | ਮੈਸੇਜ ਏਰੀਆ | ਸਥਿਤੀ ਅਤੇ ਸਫਲਤਾ ਦੇ ਸੁਨੇਹੇ ਦਿਖਾਉਂਦਾ ਹੈ | `

` ਜਿਸਦਾ `id="message"` ਹੈ | | ਟੈਕਸਟ ਇਨਪੁਟ | ਜਿੱਥੇ ਖਿਡਾਰੀ ਕੋਟ ਟਾਈਪ ਕਰਦੇ ਹਨ | `` ਜਿਸਦਾ `id="typed-value"` ਹੈ | | ਸਟਾਰਟ ਬਟਨ | ਖੇਡ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ | `` ਜਿਸਦਾ `id="start"` ਹੈ | **ਯੂਆਈ ਸਟ੍ਰਕਚਰ ਨੂੰ ਸਮਝਣਾ:** - **ਸਮੱਗਰੀ ਨੂੰ ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ ਉੱਤੋਂ ਹੇਠਾਂ ਤੱਕ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ** | ਕੋਟਸ ਦੀ ਐਰੇ | ਖੇਡ ਲਈ ਸਾਰੀਆਂ ਸੰਭਾਵਿਤ ਕੋਟਸ ਸਟੋਰ ਕਰੋ | `['Quote 1', 'Quote 2', ...]` | | ਸ਼ਬਦ ਐਰੇ | ਮੌਜੂਦਾ ਕੋਟ ਨੂੰ ਅਲੱਗ-ਅਲੱਗ ਸ਼ਬਦਾਂ ਵਿੱਚ ਤੋੜੋ | `['When', 'you', 'have', ...]` | | ਸ਼ਬਦ ਇੰਡੈਕਸ | ਟਰੈਕ ਕਰੋ ਕਿ ਖਿਡਾਰੀ ਕਿਹੜਾ ਸ਼ਬਦ ਟਾਈਪ ਕਰ ਰਿਹਾ ਹੈ | `0, 1, 2, 3...` | | ਸ਼ੁਰੂਆਤੀ ਸਮਾਂ | ਸਕੋਰਿੰਗ ਲਈ ਬੀਤਿਆ ਸਮਾਂ ਗਿਣੋ | `Date.now()` | **ਸਾਨੂੰ ਆਪਣੇ UI ਐਲੀਮੈਂਟਸ ਲਈ ਹਵਾਲੇ ਦੀ ਲੋੜ ਹੋਵੇਗੀ:** | ਐਲੀਮੈਂਟ | ID | ਉਦੇਸ਼ | |---------|----|---------| | ਟੈਕਸਟ ਇਨਪੁਟ | `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'); ``` **ਇਸ ਸੈਟਅਪ ਕੋਡ ਨਾਲ ਕੀ ਹਾਸਲ ਹੁੰਦਾ ਹੈ:** - **ਸਟੋਰ ਕਰਦਾ ਹੈ** Sherlock Holmes ਦੀਆਂ ਕੋਟਸ ਦੀ ਐਰੇ `const` ਨਾਲ ਕਿਉਂਕਿ ਕੋਟਸ ਨਹੀਂ ਬਦਲਣਗੀਆਂ - **ਟ੍ਰੈਕਿੰਗ ਵੈਰੀਏਬਲਸ ਨੂੰ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ** `let` ਨਾਲ ਕਿਉਂਕਿ ਇਹ ਮੁੱਲ ਖੇਡ ਦੌਰਾਨ ਅੱਪਡੇਟ ਹੋਣਗੇ - **DOM ਐਲੀਮੈਂਟਸ ਦੇ ਹਵਾਲੇ ਪਕੜਦਾ ਹੈ** `document.getElementById()` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤੇਜ਼ ਪਹੁੰਚ ਲਈ - **ਸਾਰਾ ਖੇਡ ਫੰਕਸ਼ਨਾਲਿਟੀ ਦਾ ਅਧਾਰ ਸੈਟ ਕਰਦਾ ਹੈ** ਸਪਸ਼ਟ ਅਤੇ ਵਰਣਨਾਤਮਕ ਵੈਰੀਏਬਲ ਨਾਂਵਾਂ ਨਾਲ - **ਲਾਜ਼ਮੀ ਡਾਟਾ ਅਤੇ ਐਲੀਮੈਂਟਸ ਨੂੰ ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ** ਕੋਡ ਦੇ ਰੱਖ-ਰਖਾਅ ਨੂੰ ਆਸਾਨ ਬਣਾਉਣ ਲਈ ✅ ਆਪਣੀ ਖੇਡ ਵਿੱਚ ਹੋਰ ਕੋਟਸ ਸ਼ਾਮਲ ਕਰੋ > 💡 **ਪ੍ਰੋ ਟਿਪ**: ਅਸੀਂ `document.getElementById()` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਜਦੋਂ ਚਾਹੀਏ ਐਲੀਮੈਂਟਸ ਨੂੰ ਰੀਟਰੀਵ ਕਰ ਸਕਦੇ ਹਾਂ। ਕਿਉਂਕਿ ਅਸੀਂ ਇਹ ਐਲੀਮੈਂਟਸ ਨੂੰ ਬਾਰ-ਬਾਰ ਹਵਾਲਾ ਦੇਣ ਜਾ ਰਹੇ ਹਾਂ, ਅਸੀਂ ਸਟ੍ਰਿੰਗ ਲਿਟਰਲਸ ਵਿੱਚ ਟਾਈਪੋਜ਼ ਤੋਂ ਬਚਣ ਜਾ ਰਹੇ ਹਾਂ। [Vue.js](https://vuejs.org/) ਜਾਂ [React](https://reactjs.org/) ਵਰਗੇ ਫਰੇਮਵਰਕ ਤੁਹਾਨੂੰ ਆਪਣੇ ਕੋਡ ਨੂੰ ਕੇਂਦਰੀਕਰਣ ਵਿੱਚ ਬਿਹਤਰ ਮਦਦ ਕਰ ਸਕਦੇ ਹਨ। > **ਇਹ ਪਹੁੰਚ ਕਿਉਂ ਬਹੁਤ ਵਧੀਆ ਕੰਮ ਕਰਦੀ ਹੈ:** - **ਸਪੈਲਿੰਗ ਗਲਤੀਆਂ ਨੂੰ ਰੋਕਦੀ ਹੈ** ਜਦੋਂ ਐਲੀਮੈਂਟਸ ਨੂੰ ਬਾਰ-ਬਾਰ ਹਵਾਲਾ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ - **ਕੋਡ ਪੜ੍ਹਨ ਯੋਗਤਾ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦੀ ਹੈ** ਵਰਣਨਾਤਮਕ ਕਾਂਸਟੈਂਟ ਨਾਂਵਾਂ ਨਾਲ - **IDE ਸਹਾਇਤਾ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦੀ ਹੈ** ਆਟੋਕੰਪਲੀਟ ਅਤੇ ਗਲਤੀ ਚੈੱਕਿੰਗ ਨਾਲ - **ਰਿਫੈਕਟੋਰਿੰਗ ਨੂੰ ਆਸਾਨ ਬਣਾਉਂਦੀ ਹੈ** ਜੇਕਰ ਐਲੀਮੈਂਟ ID ਬਾਅਦ ਵਿੱਚ ਬਦਲਦੇ ਹਨ `const`, `let` ਅਤੇ `var` ਦੀ ਵਰਤੋਂ ਕਰਨ ਬਾਰੇ ਇੱਕ ਵੀਡੀਓ ਦੇਖਣ ਲਈ ਇੱਕ ਮਿੰਟ ਲਓ [](https://youtube.com/watch?v=JNIXfGiDWM8 "ਵੈਰੀਏਬਲ ਦੇ ਪ੍ਰਕਾਰ") > 🎥 ਉਪਰੋਕਤ ਚਿੱਤਰ 'ਤੇ ਕਲਿਕ ਕਰੋ ਵੈਰੀਏਬਲ ਬਾਰੇ ਵੀਡੀਓ ਦੇਖਣ ਲਈ। ### ਸ਼ੁਰੂਆਤ ਲੌਜਿਕ ਸ਼ਾਮਲ ਕਰੋ ਇਥੇ ਸਭ ਕੁਝ ਸਹੀ ਹੋ ਜਾਂਦਾ ਹੈ! 🚀 ਤੁਸੀਂ ਆਪਣਾ ਪਹਿਲਾ ਅਸਲ ਇਵੈਂਟ ਲਿਸਨਰ ਲਿਖਣ ਜਾ ਰਹੇ ਹੋ, ਅਤੇ ਇਹ ਦੇਖਣ ਵਿੱਚ ਕਾਫ਼ੀ ਸੰਤੋਸ਼ਜਨਕ ਹੈ ਕਿ ਤੁਹਾਡਾ ਕੋਡ ਬਟਨ ਕਲਿਕ ਕਰਨ 'ਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆ ਦਿੰਦਾ ਹੈ। ਇਸ ਬਾਰੇ ਸੋਚੋ: ਕਿਤੇ ਨਾ ਕਿਤੇ, ਇੱਕ ਖਿਡਾਰੀ ਉਹ "ਸ਼ੁਰੂ" ਬਟਨ ਕਲਿਕ ਕਰਨ ਜਾ ਰਿਹਾ ਹੈ, ਅਤੇ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਉਸ ਲਈ ਤਿਆਰ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਸਾਨੂੰ ਕੋਈ ਅੰਦਾਜ਼ਾ ਨਹੀਂ ਕਿ ਉਹ ਕਦੋਂ ਕਲਿਕ ਕਰਨਗੇ - ਤੁਰੰਤ, ਜਾਂ ਕੌਫੀ ਪੀਣ ਤੋਂ ਬਾਅਦ - ਪਰ ਜਦੋਂ ਉਹ ਕਰਦੇ ਹਨ, ਤੁਹਾਡੀ ਖੇਡ ਜਿੰਦਗੀ ਵਿੱਚ ਆਉਂਦੀ ਹੈ। ਜਦੋਂ ਯੂਜ਼ਰ `start` ਕਲਿਕ ਕਰਦਾ ਹੈ, ਸਾਨੂੰ ਇੱਕ ਕੋਟ ਚੁਣਨ ਦੀ ਲੋੜ ਹੈ, ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਸੈਟਅਪ ਕਰਨਾ ਹੈ, ਅਤੇ ਮੌਜੂਦਾ ਸ਼ਬਦ ਅਤੇ ਸਮੇਂ ਲਈ ਟ੍ਰੈਕਿੰਗ ਸੈਟਅਪ ਕਰਨੀ ਹੈ। ਹੇਠਾਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ; ਅਸੀਂ ਇਸ ਨੂੰ ਸਕ੍ਰਿਪਟ ਬਲਾਕ ਤੋਂ ਬਾਅਦ ਚਰਚਾ ਕਰਦੇ ਹਾਂ। ```javascript // 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 `${word} `}); // 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 ਸੈਟਅਪ ਅਤੇ ਡਿਸਪਲੇ:** - **ਬਣਾਉਂਦਾ ਹੈ** `` ਐਲੀਮੈਂਟਸ ਦੀ ਇੱਕ ਐਰੇ, ਹਰ ਸ਼ਬਦ ਨੂੰ ਵਿਅਕਤੀਗਤ ਸਟਾਈਲਿੰਗ ਲਈ ਲਪੇਟਦਾ ਹੈ - **ਸਪੈਨ ਐਲੀਮੈਂਟਸ ਨੂੰ ਜੋੜਦਾ ਹੈ** ਇੱਕ ਸਿੰਗਲ ਸਟ੍ਰਿੰਗ ਵਿੱਚ DOM ਅੱਪਡੇਟਿੰਗ ਲਈ - **ਪਹਿਲੇ ਸ਼ਬਦ ਨੂੰ ਹਾਈਲਾਈਟ ਕਰਦਾ ਹੈ** CSS ਕਲਾਸ `highlight` ਸ਼ਾਮਲ ਕਰਕੇ - **ਪਿਛਲੇ ਖੇਡ ਸੁਨੇਹੇ ਸਾਫ ਕਰਦਾ ਹੈ** ਇੱਕ ਸਾਫ ਸਲੇਟ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ **⌨️ ਟੈਕਸਟਬਾਕਸ ਤਿਆਰੀ:** - **ਇਨਪੁਟ ਖੇਤਰ ਵਿੱਚ ਮੌਜੂਦਾ ਟੈਕਸਟ ਸਾਫ ਕਰਦਾ ਹੈ** - **ਟੈਕਸਟਬਾਕਸ 'ਤੇ ਫੋਕਸ ਸੈਟ ਕਰਦਾ ਹੈ** ਤਾਂ ਜੋ ਖਿਡਾਰੀ ਤੁਰੰਤ ਟਾਈਪ ਕਰ ਸਕਣ - **ਨਵੀਂ ਖੇਡ ਸੈਸ਼ਨ ਲਈ ਇਨਪੁਟ ਖੇਤਰ ਤਿਆਰ ਕਰਦਾ ਹੈ** **⏱️ ਟਾਈਮਰ ਸ਼ੁਰੂਆਤ:** - **ਮੌਜੂਦਾ ਟਾਈਮਸਟੈਂਪ ਪਕੜਦਾ ਹੈ** `new Date().getTime()` ਦੀ ਵਰਤੋਂ ਕਰਕੇ - **ਟਾਈਪਿੰਗ ਸਪੀਡ ਅਤੇ ਪੂਰਨ ਸਮੇਂ ਦੀ ਸਹੀ ਗਿਣਤੀ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ** - **ਖੇਡ ਸੈਸ਼ਨ ਲਈ ਪ੍ਰਦਰਸ਼ਨ ਟ੍ਰੈਕਿੰਗ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ** ### ਟਾਈਪਿੰਗ ਲੌਜਿਕ ਸ਼ਾਮਲ ਕਰੋ ਇਥੇ ਅਸੀਂ ਆਪਣੀ ਖੇਡ ਦੇ ਦਿਲ ਨੂੰ ਹੱਲ ਕਰਦੇ ਹਾਂ! ਚਿੰਤਾ ਨਾ ਕਰੋ ਜੇ ਇਹ ਪਹਿਲਾਂ ਕੁਝ ਜ਼ਿਆਦਾ ਲੱਗਦਾ ਹੈ - ਅਸੀਂ ਹਰ ਹਿੱਸੇ ਨੂੰ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸਮਝਾਵਾਂਗੇ, ਅਤੇ ਅੰਤ ਵਿੱਚ, ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਇਹ ਸਾਰਾ ਕਿੰਨਾ ਤਰਕਸੰਗਤ ਹੈ। ਜੋ ਅਸੀਂ ਇੱਥੇ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ ਉਹ ਕਾਫ਼ੀ ਸੁਧਾਰਤ ਹੈ: ਹਰ ਵਾਰ ਜਦੋਂ ਕੋਈ ਵਿਅਕਤੀ ਇੱਕ ਅੱਖਰ ਟਾਈਪ ਕਰਦਾ ਹੈ, ਸਾਡਾ ਕੋਡ ਜਾਂਚੇਗਾ ਕਿ ਉਹ ਕੀ ਟਾਈਪ ਕੀਤਾ, ਉਨ੍ਹਾਂ ਨੂੰ ਫੀਡਬੈਕ ਦੇਵੇਗਾ, ਅਤੇ ਫੈਸਲਾ ਕਰੇਗਾ ਕਿ ਅਗਲਾ ਕੀ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਇਹ ਉਸੇ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ 1970 ਦੇ ਦਹਾਕੇ ਵਿੱਚ WordStar ਵਰਗੇ ਸ਼ੁਰੂਆਤੀ ਵਰਡ ਪ੍ਰੋਸੈਸਰ ਟਾਈਪਿਸਟਸ ਨੂੰ ਰੀਅਲ-ਟਾਈਮ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰਦੇ ਸਨ। ```javascript // 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'; } }); ``` **ਟਾਈਪਿੰਗ ਲੌਜਿਕ ਫਲੋ ਨੂੰ ਸਮਝਣਾ:** ਇਹ ਫੰਕਸ਼ਨ ਇੱਕ ਵਾਟਰਫਾਲ ਪਹੁੰਚ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਜੋ ਕਿ ਸਭ ਤੋਂ ਵਿਸ਼ੇਸ਼ ਤੋਂ ਸਭ ਤੋਂ ਆਮ ਹਾਲਤਾਂ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ। ਆਓ ਹਰ ਸਥਿਤੀ ਨੂੰ ਤੋੜ ਕੇ ਸਮਝੀਏ: ```mermaid 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 ਅੱਪਡੇਟਸ ਦਾ ਅਭਿਆਸ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ। **ਪ੍ਰੋੰਪਟ:** ਟਾਈਪਿੰਗ ਖੇਡ ਲਈ ਇੱਕ ਮੁਸ਼ਕਲਤਾ ਸਿਸਟਮ ਬਣਾਓ ਜੋ: 1. ਖਿਡਾਰੀ ਦੀ ਟਾਈਪਿੰਗ ਸਪੀਡ (ਸ਼ਬਦ ਪ੍ਰਤੀ ਮਿੰਟ) ਅਤੇ ਸਹੀਤਾ ਪ੍ਰਤੀਸ਼ਤ ਨੂੰ ਟਰੈਕ ਕਰਦਾ ਹੈ 2. ਤਿੰਨ ਮੁਸ਼ਕਲਤਾ ਪੱਧਰਾਂ ਨੂੰ ਸਵੈ-ਚਲਿਤ ਤੌਰ 'ਤੇ ਅਨੁਕੂਲ ਕਰਦਾ ਹੈ: ਆਸਾਨ (ਸਧਾਰਨ ਕੋਟਸ), ਮੱਧਮ (ਮੌਜੂਦਾ ਕੋਟਸ), ਮੁਸ਼ਕਲ (ਜਟਿਲ ਕੋਟਸ ਪੰਕਚੁਏਸ਼ਨ ਨਾਲ) 3. ਮੌਜੂਦਾ ਮੁਸ਼ਕਲਤਾ ਪੱਧਰ ਅਤੇ ਖਿਡਾਰੀ ਦੇ ਸਟੈਟਿਸਟਿਕਸ ਨੂੰ UI 'ਤੇ ਦਿਖਾਉਂਦਾ ਹੈ 4. ਇੱਕ ਸਟ੍ਰੀਕ ਕਾਊਂਟਰ ਲਾਗੂ ਕਰਦਾ ਹੈ ਜੋ 3 ਲਗਾਤਾਰ ਚੰਗੇ ਪ੍ਰਦਰਸ਼ਨ ਤੋਂ ਬਾਅਦ ਮੁਸ਼ਕਲਤਾ ਵਧਾਉਂਦਾ ਹੈ 5. ਵਿਜ਼ੂਅਲ ਫੀਡਬੈਕ (ਰੰਗ, ਐਨੀਮੇਸ਼ਨ) ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਜੋ ਮੁਸ਼ਕਲਤਾ ਬਦਲਾਅ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ ਜਰੂਰੀ HTML ਐਲੀਮੈਂਟਸ, CSS ਸਟਾਈਲਸ, ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ ਇਸ ਫੀਚਰ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ। ਸਹੀ ਗਲਤੀ --- **ਅਸਵੀਕਰਤਾ**: ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਨਿਸ਼ਚਿਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।