I have created a typing website that improves typing accuracy and speed, but it is files on my computer and accessing it locally, I am trying to put them onto replit with all of the files working properly on my computer but the script.js file doesn't seem to be reading and there is errors from it such as:
ReferenceError: quoteInputElement is not defined
at /script.js:2:1
ReferenceError: quoteInputElement is not defined
at /script.js:2:1
SyntaxError: Identifier 'RANDOM_QUOTE_API_URL' has already been declared
at /script.js:1:1
This is my code in the js file:
const RANDOM_QUOTE_API_URL = 'http://api.quotable.io/random'
const quoteDisplayElement = document.getElementById('quoteDisplay')
const quoteInputElement = document.getElementById('quoteInput')
const timerElement = document.getElementById('timer')
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()
})
function getRandomQuote() {
return fetch(RANDOM_QUOTE_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()
Everything works fine from my computer but cannot figure out why this is happening. Please help me out, thanks!