Click start to have a quote displayed. Type the quote as fast as you can!
+
+
+
Practice your typing
+
+ Click start to have a quote displayed. Type the quote as fast as you
+ can!
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/4-typing-game/solution/index.js b/4-typing-game/solution/index.js
index 646c38a3..557b4c1e 100644
--- a/4-typing-game/solution/index.js
+++ b/4-typing-game/solution/index.js
@@ -1,11 +1,11 @@
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.',
+ "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.",
];
// array for storing the words of the current challenge
@@ -16,70 +16,77 @@ let wordIndex = 0;
let startTime = Date.now();
// grab UI items
-const quoteElement = document.getElementById('quote');
-const messageElement = document.getElementById('message')
-const typedValueElement = document.getElementById('typed-value');
+const quoteElement = document.getElementById("quote");
+const messageElement = document.getElementById("message");
+const typedValueElement = document.getElementById("typed-value");
+const winElement = document.querySelector(".win");
-document.getElementById('start').addEventListener('click', function () {
- // 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;
+document.getElementById("start").addEventListener("click", function () {
+ // 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 = '';
+ // 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
+ winElement.style.height = "0";
+ messageElement.innerText = "";
- // Setup the textbox
- // Clear the textbox
- typedValueElement.value = '';
- // set focus
- typedValueElement.focus();
- // set the event handler
+ // Setup the textbox
+ // Clear the textbox
+ typedValueElement.value = "";
+ // set focus
+ typedValueElement.focus();
+ // set the event handler
- // Start the timer
- startTime = new Date().getTime();
+ // Start the timer
+ startTime = new Date().getTime();
});
-typedValueElement.addEventListener('input', (e) => {
- // Get the current word
- const currentWord = words[wordIndex];
- // get the current value
- const typedValue = typedValueElement.value;
+typedValueElement.addEventListener("input", (e) => {
+ // 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 quote
- // 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';
- }
+ if (typedValue === currentWord && wordIndex === words.length - 1) {
+ // end of quote
+ // Display success
+ const elapsedTime = new Date().getTime() - startTime;
+ winElement.style.height = "2rem";
+ 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";
+ }
});
diff --git a/4-typing-game/typing-game/README.md b/4-typing-game/typing-game/README.md
index 0930c068..184290f7 100644
--- a/4-typing-game/typing-game/README.md
+++ b/4-typing-game/typing-game/README.md
@@ -77,22 +77,41 @@ Create a new file named **index.html**. Add the following HTML:
```html
-
- Typing game
-
-
-
-
Typing game!
-
Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+ Typing
+
+
+
+
+
+
Practice your typing
+
+ Click start to have a quote displayed. Type the quote as fast as you
+ can!
+