diff --git a/4-typing-game/solution/index.js b/4-typing-game/solution/index.js
index 646c38a3..13064e83 100644
--- a/4-typing-game/solution/index.js
+++ b/4-typing-game/solution/index.js
@@ -15,11 +15,16 @@ let wordIndex = 0;
// default value for startTime (will be set on start)
let startTime = Date.now();
-// grab UI items
+// grab UI items and ensure they exist
const quoteElement = document.getElementById('quote');
-const messageElement = document.getElementById('message')
+const messageElement = document.getElementById('message');
const typedValueElement = document.getElementById('typed-value');
+if (!quoteElement || !messageElement || !typedValueElement) {
+ console.error('Missing one or more UI elements.');
+ throw new Error('UI elements not found');
+}
+
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(function (word) { return `${word}`; });
// Convert into string and set as innerHTML on quote display
- quoteElement.innerHTML = spanWords.join('');
+ quoteElement.innerHTML = spanWords.join(' ');
// Highlight the first word
- quoteElement.childNodes[0].className = 'highlight';
+ quoteElement.children[0].className = 'highlight';
// Clear any prior messages
messageElement.innerText = '';
@@ -44,7 +49,6 @@ document.getElementById('start').addEventListener('click', function () {
typedValueElement.value = '';
// set focus
typedValueElement.focus();
- // set the event handler
// Start the timer
startTime = new Date().getTime();
@@ -60,8 +64,10 @@ typedValueElement.addEventListener('input', (e) => {
// end of quote
// Display success
const elapsedTime = new Date().getTime() - startTime;
- const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
+ const message = `CONGRATULATIONS! You finished in ${(elapsedTime / 1000).toFixed(2)} seconds.`;
messageElement.innerText = message;
+ // Disable input to prevent further typing
+ typedValueElement.disabled = true;
} else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
// end of word
// clear the typedValueElement for the new word
@@ -69,14 +75,13 @@ 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
typedValueElement.className = '';
} else {
// error state