main.js

const quote_api = 'https://api.quotable.io/random?minLength=160'
const quoteDisplay = document.querySelector('#quoteDisplay')
const authorDisplay = document.querySelector('#authorDisplay')
const quoteInput = document.querySelector('#quoteInput')
const nextButton = document.querySelector('#nextButton')
const incorrectEntry = document.querySelector('#incorrectEntry')
const timer = document.querySelector('#timer')
const wpm = document.querySelector('#wpm')
let timerStart = false;
let startTime
let count = 5

// Current quote information, as globals
let quote, authorName, quoteLength;

// 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('')
      let finished = true;
      arrayQuote.forEach((charSpan, index) => {
        if(typingError !== true || event.inputType == 'deleteContentBackward'){
          const character = arrayValue[index]
          if (character == null) {
              charSpan.classList.remove('correct')
              charSpan.classList.remove('incorrect')
              typingError = false;
              finished = 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
              finished = false;
              console.log('error', typingError, window.typingError)
          }
        }
      })
      if(finished) {
        quoteInput.readOnly = true;
        timerStart = false;
    }
  })


nextButton.addEventListener('click', () => {
    getNextQuote()
    quoteInput.readOnly = false;
    quoteInput.focus();
})

function getRandomQuote() {
    return fetch(quote_api)
        .then(response => response.json())
        .then(data => data)
        .catch(error => {
          console.log(error)
        })
}

// These functions are redundant. We can get everything from `getRandomQuote`
//
// function getAuthorName(){
//     return fetch(quote_api)
//         .then(response => response.json())
//         .then(data => data.author)
// }
// function getQuoteLength(){
//     return fetch(quote_api)
//         .then(response => response.json())
//         .then(data => data.length)
// }

async function getNextQuote () {
    // Gets the quote, author, and length
    // See for info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring
    ({ content: quote, author: authorName, length: quoteLength } = await getRandomQuote())
    console.log(quote, authorName, quoteLength)

    quoteDisplay.innerHTML = ''
    quote.split('').forEach(character => {
        const charSpan = document.createElement('span')
        charSpan.innerText = character
        quoteDisplay.appendChild(charSpan)
    })
    authorDisplay.innerHTML = " -" + authorName
    quoteInput.value = null;
    timerStart = true;
    count = 5;
    startTimer()
}


function startTimer() {
    timer.innerText = 0
    startTime = new Date()

    let interval = setInterval(() =>{
        if (timerStart) {
            if (count > 0) {
                console.log(count);
                count--;
            }
            else {
                clearInterval(interval)
                console.log('RUnning else on startTimer() interval')
                setInterval(() => {
                    timer.innerText = getTimerTime()
                }, 100);
            }
        }
    }, 1000);

}
function getTimerTime() {
    if (timerStart){
        if (count > 0){
            return (new Date() - startTime) / 1000
        }else {
            let calcWpm = (quoteLength / 5) / timer.innerText
            wpm.innerText = calcWpm
            return timer.innerText = timer.innerText
        }
    }

}