Fix to disable certain keys and disable typing if incorrect key pressed.

final-project/js/main.js

@@ -3,36 +3,70 @@ const quoteDisplay = document.querySelector('#quoteDisplay')
 const quoteInput = document.querySelector('#quoteInput')
 const nextButton = document.querySelector('#nextButton')
 
-quoteInput.addEventListener('input', () => {
+// Use this to flag typing errors
+let typingError = false
+
+// Key presses in this array will be ignored
+const badKeys = [
+  "Enter",
+  "Delete"
+]
+
+
+quoteInput.addEventListener('keydown', (event) => {
+
+  // Disable  "bad" keys
+  if(badKeys.indexOf(event.key) !== -1){
+    console.error('"' + event.key + '" key is not allowed. Ignoring input.')
+    event.preventDefault();
+  }
+
+  // Or if there's a mistake
+  if(typingError === true && event.key !== 'Backspace'){
+    // Disable further typing
+    event.preventDefault();
+  }
+
+})
+
+quoteInput.addEventListener('input', (event) => {
+  console.log(event)
+
     const arrayQuote = quoteDisplay.querySelectorAll('span')
     const arrayValue = quoteInput.value.split('')
 
     arrayQuote.forEach((charSpan, index) => {
+      if(typingError !== true || event.inputType == 'deleteContentBackward'){
         const character = arrayValue[index]
+        console.log(charSpan)
         if (character == null) {
             charSpan.classList.remove('correct')
             charSpan.classList.remove('incorrect')
+            typingError = false;
         } else if (character === charSpan.innerText) {
             charSpan.classList.add('correct')
             charSpan.classList.remove('incorrect')
+            typingError = false;
         } else {
             charSpan.classList.add('incorrect')
             charSpan.classList.remove('correct')
-
+
+            typingError = true
+            console.log('error', typingError, window.typingError)
+
+
             // This stops after you mess up and allows you to backspace but not continue typing after fixing your mistake
             // if (quoteInput.keyCode !== 13){ quoteInput.setAttribute('maxlength', 0)}
             // else{ quoteInput.setAttribute('maxlength', 100)}
         }
+      }
     })
 })
 
-function dontType(event){
-    event.preventDefault()
-}
 
 nextButton.addEventListener('click', () => {
     getNextQuote()
-}) 
+})
 
 function getRandomQuote() {
     return fetch(quote_api)
@@ -51,4 +85,4 @@ async function getNextQuote () {
     quoteInput.value = null;
 }
 
-getNextQuote()
+getNextQuote()