diff --git a/type/script.js b/type/script.js index 79f7132..0bd9d0b 100644 --- a/type/script.js +++ b/type/script.js @@ -11,6 +11,7 @@ let typedText = ''; let totalWords = 0; let correctWords = 0; let isTyping = false; +let originalText = ''; const texts = [ "the quick brown fox jumps over the lazy dog", @@ -45,16 +46,36 @@ const texts = [ "it sounds like a lot of hoopla lemon lime cake" ]; +// Randomly select a text function getRandomText() { const randomIndex = Math.floor(Math.random() * texts.length); return texts[randomIndex]; } +// Set the text to type function setTextToType() { - const randomText = getRandomText(); - textToTypeElement.innerText = randomText; + originalText = getRandomText(); + updateHighlightedText(); } +// Highlight typed words +function updateHighlightedText() { + const inputWords = typedText.trim().split(/\s+/); + const textWords = originalText.split(' '); + + const highlighted = textWords.map((word, index) => { + if (!inputWords[index]) return `${word}`; + if (inputWords[index] === word) { + return `${word}`; // green for correct + } else { + return `${word}`; // red for wrong + } + }); + + textToTypeElement.innerHTML = highlighted.join(' '); +} + +// Start a new typing test function startTest() { setTextToType(); userInput.value = ''; @@ -66,6 +87,7 @@ function startTest() { clearInterval(timer); } +// Calculate accuracy and speed function countCorrectWords(input, text) { const inputWords = input.split(' '); const textWords = text.split(' '); @@ -79,15 +101,23 @@ function countCorrectWords(input, text) { } function updateStats() { - const totalWordsTyped = typedText.split(' ').length; - correctWords = countCorrectWords(typedText, textToTypeElement.innerText); - const speed = Math.round((totalWordsTyped / 5) / (seconds / 60)); - const accuracy = Math.round((correctWords / totalWordsTyped) * 100); + const totalWordsTyped = typedText.trim().split(/\s+/).length; + correctWords = countCorrectWords(typedText, originalText); + + let speed = 0; + if (seconds > 0) { + speed = Math.round((totalWordsTyped / 5) / (seconds / 60)); + } + + const accuracy = totalWordsTyped > 0 + ? Math.round((correctWords / totalWordsTyped) * 100) + : 100; speedDisplay.innerText = speed; accuracyDisplay.innerText = accuracy; } +// Event listener for user input userInput.addEventListener('input', function() { if (!isTyping) { startTimer(); @@ -97,8 +127,10 @@ userInput.addEventListener('input', function() { typedText = userInput.value; totalWords = typedText.split(' ').length; updateStats(); + updateHighlightedText(); }); +// Timer function function startTimer() { timer = setInterval(function() { seconds++; @@ -106,6 +138,8 @@ function startTimer() { }, 1000); } +// Restart test when the button is clicked restartButton.addEventListener('click', startTest); +// Initialize the page startTest();