diff --git a/final-project/js/main.js b/final-project/js/main.js index 5dd5052..119ef3f 100644 --- a/final-project/js/main.js +++ b/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() \ No newline at end of file +getNextQuote()