diff --git a/3-typing-game/typing-game/css.html b/3-typing-game/typing-game/css.html new file mode 100644 index 0000000..4b94923 --- /dev/null +++ b/3-typing-game/typing-game/css.html @@ -0,0 +1,12 @@ +.highlight { + background-color: yellow; + } + + .error { + background-color: lightcoral; + border: red; + } + + #leaderboard{ + margin-top: 20px; + } \ No newline at end of file diff --git a/3-typing-game/typing-game/index.html b/3-typing-game/typing-game/index.html new file mode 100644 index 0000000..06aa586 --- /dev/null +++ b/3-typing-game/typing-game/index.html @@ -0,0 +1,19 @@ + + + Typing game + + + +

Typing game!

+

Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!

+

+

+
+ + +
+
+

+ + + \ No newline at end of file diff --git a/3-typing-game/typing-game/script.js b/3-typing-game/typing-game/script.js new file mode 100644 index 0000000..14d5977 --- /dev/null +++ b/3-typing-game/typing-game/script.js @@ -0,0 +1,85 @@ +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.', + 'hi' +]; + +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'); + +// 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[7]; + // 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(); + }); + +// 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'; + } + }); \ No newline at end of file diff --git a/3-typing-game/typing-game/script1.js b/3-typing-game/typing-game/script1.js new file mode 100644 index 0000000..87bdf8a --- /dev/null +++ b/3-typing-game/typing-game/script1.js @@ -0,0 +1,77 @@ +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.', + "i" +]; + +let words = []; +let wordIndex = 0; +let startTime = Date.now(); +const quoteElement = document.getElementById('quote'); +const messageElement = document.getElementById('message'); +const typedValueElement = document.getElementById('typed-value'); + + +document.getElementById('start').addEventListener('click', () => { + const quoteIndex = Math.floor(Math.random()*quotes.length); // get a random number and store quote with that index into quote + const quote = quotes[7]; + words = quote.split(' '); + wordIndex = 0; + const spanWords = words.map(function(word) { return `${word} `}); + quoteElement.innerHTML = spanWords.join(''); + quoteElement.childNodes[0].className = 'highlight'; + messageElement.innerText = ''; + typedValueElement.value = ''; + typedValueElement.disabled = false; //reverting if user is trying to click start for 2nd time since it is already disabled + typedValueElement.focus(); + startTime = new Date().getTime(); + + + +typedValueElement.addEventListener('input', () => { + const currentword = words[wordIndex]; + const typedValue = typedValueElement.value; //and typedValueElement.innerHTML.innertext is wrong + if(typedValue === currentword && wordIndex === words.length -1 ){ + const elapsedTime = new Date().getTime() - startTime; + const message = `CONGRATULATIONS! You finished in ${elapsedTime/1000} seconds.`; + messageElement.innerText = message; + typedValueElement.value = ''; //clear the input box + typedValueElement.disabled = true; //disable the input box + quoteElement.innerText="";//here, .value is not added + //typedValueElement.removeEventListener(); //remove the event listener + if (!localStorage.getItem("highest score") || elapsedTime/1000 < (localStorage.getItem("highest score"))) { + localStorage.setItem("highest score", elapsedTime/1000); + console.log(elapsedTime/1000) + } + + + + }else if(typedValue.endsWith(' ') && typedValue.trim() === currentword){ + typedValueElement.value = ''; + wordIndex++; + for(const wordElement of quoteElement.childNodes){ + wordElement.className = ''; + } + quoteElement.childNodes[wordIndex].className = 'highlight'; + + + }else if(currentword.startsWith(typedValue)){ + typedValueElement.className = ''; + } + else{ + typedValueElement.className = 'error'; + } + + + +})}); + + +leaderboard.addEventListener('click', () => { + highscore.innerHTML = localStorage.getItem("highest score"); +}); \ No newline at end of file