diff --git a/4-typing-game/solution/index.js b/4-typing-game/solution/index.js index 646c38a3..644e2b81 100644 --- a/4-typing-game/solution/index.js +++ b/4-typing-game/solution/index.js @@ -20,6 +20,11 @@ const quoteElement = document.getElementById('quote'); const messageElement = document.getElementById('message') const typedValueElement = document.getElementById('typed-value'); +// Check if UI elements exist +if (!quoteElement || !messageElement || !typedValueElement) { + console.error("One or more required elements are missing from the DOM."); +} + document.getElementById('start').addEventListener('click', function () { // get a quote const quoteIndex = Math.floor(Math.random() * quotes.length); @@ -31,11 +36,11 @@ document.getElementById('start').addEventListener('click', function () { // UI updates // Create an array of span elements so we can set a class - const spanWords = words.map(function(word) { return `${word} `}); + const spanWords = words.map(word => `${word}`); // Convert into string and set as innerHTML on quote display quoteElement.innerHTML = spanWords.join(''); // Highlight the first word - quoteElement.childNodes[0].className = 'highlight'; + quoteElement.children[0].className = 'highlight'; // Clear any prior messages messageElement.innerText = ''; @@ -62,6 +67,8 @@ typedValueElement.addEventListener('input', (e) => { const elapsedTime = new Date().getTime() - startTime; const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`; messageElement.innerText = message; + + typedValueElement.disabled = true; } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) { // end of word // clear the typedValueElement for the new word @@ -69,11 +76,11 @@ typedValueElement.addEventListener('input', (e) => { // move to the next word wordIndex++; // reset the class name for all elements in quote - for (const wordElement of quoteElement.childNodes) { + for (const wordElement of quoteElement.children) { wordElement.className = ''; } // highlight the new word - quoteElement.childNodes[wordIndex].className = 'highlight'; + quoteElement.children[wordIndex].className = 'highlight'; } else if (currentWord.startsWith(typedValue)) { // currently correct // highlight the next word