script.js

const RandomQuote_API_URL = 'https://api.quotable.io/random'
const quoteDisplayElement = document.getElementById('quoteDisplay')
const quoteInputElement = document.getElementById('quoteInput')
const timerElement = document.getElementById('timer')
const textElement = document.getElementById('infoText')
const contCounter = document.getElementById('counter')
var i = 0;
var completeSentences = 0;
var typingSpeed = 0;


contCounter.innerHTML = completeSentences;
document.getElementById('completed').innerHTML = 'Completed Sentneces: ';


quoteInputElement.addEventListener("keydown", removeText);
function removeText() {
  textElement.style.visibility = "hidden";
  while (i==0) {
    i++;
    startTimer();
  }
}

quoteInputElement.addEventListener('input', () => {
  const arrayQuote = quoteDisplayElement.querySelectorAll('span')
  const arrayValue = quoteInputElement.value.split('')

  let correct = true
  arrayQuote.forEach((characterSpan, index) => {
    const character = arrayValue[index]
    if (character == null) {
      characterSpan.classList.remove('correct')
      characterSpan.classList.remove('incorrect')
      correct = false
    } else if (character === characterSpan.innerText) {
      characterSpan.classList.add('correct')
      characterSpan.classList.remove('incorrect')
    } else {
      characterSpan.classList.remove('correct')
      characterSpan.classList.add('incorrect')
      correct = false
    }
  })

  if (correct) {
    renderNewQuote();
    completeSentences += 1;
    contCounter.innerHTML = completeSentences;
  }
})

function getRandomQuote() {
  return fetch(RandomQuote_API_URL)
    .then(response => response.json())
    .then(data => data.content)
}

async function renderNewQuote() {
  const quote = await getRandomQuote()
  quoteDisplayElement.innerHTML = ''
  quote.split('').forEach(character => {
    const characterSpan = document.createElement('span')
    characterSpan.innerText = character
    quoteDisplayElement.appendChild(characterSpan)
  })
  quoteInputElement.value = null

  // startTimer()
}

let startTime
function startTimer() {
  timerElement.innerText = 0
  startTime = new Date()
  setInterval(() => { timer.innerText = getTimerTime()}, 1000)
}

function getTimerTime() {
  return Math.floor((new Date() - startTime) / 1000)
}

renderNewQuote()