alforoan – 05-45 Oct 24

const wordsArraySpan = document.querySelector(".words-array");
const input = document.querySelector(".input");
let inputArray = [];
let currentIndex = 0;

input.addEventListener("input", function (e) {
  const typedText = this.value.trim();
  const words = typedText.split(" ");
  let highlightedWords = [];

  for (let i = 0; i < wordsArray.length; i++) {
    const word = wordsArray[i];
    const isMatched = words.includes(word) || inputArray.includes(word);

    let highlightedWord = "";

    if (i === currentIndex) {
      for (let j = 0; j < word.length; j++) {
        if (j < typedText.length && word[j] === typedText[j]) {
          highlightedWord += `<span class="highlight">${word[j]}</span>`;
        } else {
          highlightedWord += word[j];
        }
      }
    } else {
      highlightedWord = word; // Use the original word for other words
    }

    highlightedWords.push(
      isMatched
        ? `<span class="highlight">${highlightedWord}</span>`
        : highlightedWord
    );

    if (isMatched && !inputArray.includes(word) && typedText === word) {
      if (e.data === " ") {
        inputArray.push(word);
        this.value = "";
        currentIndex++;
      }
    }
  }

  wordsArraySpan.innerHTML = highlightedWords.join(" ");
});