amfoss · Kanduriavinash · Sep 14, 2025
diff --git a/3-typing-game/typing-game/css.html 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;
+  }
diff --git a/3-typing-game/typing-game/index.html b/3-typing-game/typing-game/index.html
@@ -0,0 +1,19 @@
+<html>
+<head>
+  <title>Typing game</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h1>Typing game!</h1>
+  <p>Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!</p>
+  <p id="quote"></p> 
+  <p id="message"></p>
+  <div>
+    <input type="text" aria-label="current word" id="typed-value" /> 
+    <button type="button" id="start">Start</button> 
+  </div>
+  <div id="leaderboard"><button>lowest time </button></div>
+  <p id = "highscore"></p>
+  <script src="script1.js"></script>
+</body>
+</html>
diff --git a/3-typing-game/typing-game/script.js 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 `<span>${word} </span>`});
+    // 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';
+    }
+  });
diff --git a/3-typing-game/typing-game/script1.js 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 `<span>${word} </span>`});
+    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");
+});