How to turn a letter box red in a game that resembles wordle?

Question

I am making a wordle like game for my school assignment. So if a letter is guessed correct it should be marked green if a letter is guessed that is not in the word the box needs to turn red. This is my first time asking a question. So please tell me if I need do add something or give you more information.

I have tried various code that chat gpt provided, but non of them worked. I struggle to create new code in javascript since i am an absolute beginner.

const wordList = ["lezen", 'ijzer']; // Lijst van te raden woorden
let currentWordIndex = 0; // houdt bij welk woord momenteel geraden wordt
let targetWord = wordList[currentWordIndex]; // bevat het woord dat de speler moet raden

// Array om de huidige status van geraden letters op te slaan, initieel zijn alle letters vervangen door underscores
let guessedLetters = Array(targetWord.length).fill('_');

const maxAttempts = 10;
let attemptsLeft = maxAttempts;

// Referenties naar HTML-elementen voor latere manipulatie
const wordDisplay = document.getElementById('word-display');
const guessInput = document.getElementById('guess-input');
const feedbackDisplay = document.getElementById('feedback');

// Toon het initiële woord, initieel is dit enkel underscores
updateWordDisplay();

// Deze functie zoekt naar overeenkomende letters tussen de geraden letters en het te raden woord.
function findMatchingLetters(guess, word) {
  let matchingLetters = [];

  for (let i = 0; i < guess.length; i++) {
    if (word.includes(guess[i]) && !matchingLetters.includes(guess[i])) {
      matchingLetters.push(guess[i]);
    }
  }

  return matchingLetters;
}

// Deze functie wordt aangeroepen wanneer de speler een gok doet. Het controleert of de gok correct is, werkt de weergave bij, geeft feedback, en controleert of het spel is gewonnen of verloren.
function checkGuess() {
  const guess = guessInput.value.toLowerCase();

  if (guess.length === 5 && /^[a-z]+$/.test(guess)) { // Deze voorwaarde controleert of de ingevoerde gok voldoet aan de vereisten: 5 tekens lang en bevat alleen letters van a-z
    const isCorrectGuess = updateGuessedLetters(guess); // Controleer of de gok juist is, het resultaat wordt opgeslagen in isCorrectGuess

    updateWordDisplay(); // Update het weergegeven woord, de letters worden getoond als ze op de juiste plaats staan

    if (isCorrectGuess) {
      feedbackDisplay.textContent = "Je hebt een letter geraden";
    }

    console.log(guess, wordList[0])

    const result = findMatchingLetters(guess, wordList[0])

    console.log(result)

    result.forEach(letter => {
      const letterElems = document.querySelectorAll(".letter")
      letterElems.forEach(element => {
        if (element.textContent === letter.toUpperCase()) {
          element.style.backgroundColor = 'green';
        }
      })

      for (let i = 0; i < guessedLetters.length; i++) {
        if (guessedLetters[i] !== '_' && guessedLetters[i] !== targetWord[i] && guessedLetters[i].toUpperCase() === letter.toUpperCase()) {
          const letterElem = document.querySelectorAll(".letter")[i];
          letterElem.style.backgroundColor = 'red';
        }
      }
    })

    attemptsLeft--;
    feedbackDisplay.textContent = `Foute gok. Nog ${attemptsLeft} kansen over.`;

    if (attemptsLeft === 0) {
      feedbackDisplay.textContent += ` Het woord was "${targetWord}".`;
      setTimeout(nextWord, 5000); // Toon het volgende woord na 5 seconden
    }

  } else {
    feedbackDisplay.textContent = "Please enter a valid 5-letter guess.";
  }

  guessInput.value = ''; // Wis het invoerveld
  guessInput.focus(); // Plaats de focus terug op het invoerveld
}



// Functie om geraden letters bij te werken
function updateGuessedLetters(guess) {
  let isCorrectGuess = false;

  for (let i = 0; i < targetWord.length; i++) {
    if (targetWord[i] === guess[i] && guessedLetters[i] === '_') {
      guessedLetters[i] = guess[i];
      isCorrectGuess = true;
    }
  }

  return isCorrectGuess;
}

// Functie om het weergegeven woord bij te werken
function updateWordDisplay() {
  wordDisplay.textContent = guessedLetters.join(' ');
}


// Functie om naar het volgende woord te gaan
function nextWord() {
  currentWordIndex++;
  if (currentWordIndex < wordList.length) {
    targetWord = wordList[currentWordIndex];
    guessedLetters = Array(targetWord.length).fill('_');
    attemptsLeft = maxAttempts;
    updateWordDisplay();
    feedbackDisplay.textContent = "";
  } else {
    feedbackDisplay.textContent = "Game over. You've completed all the words.";
  }
}

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 50px;
}

#word-display {
  font-size: 24px;
  margin-bottom: 20px;
}

#guess-input {
  font-size: 16px;
  padding: 5px;
}

#submit-button {
  font-size: 16px;
  padding: 8px 16px;
  cursor: pointer;
}

#feedback {
  font-size: 18px;
  margin-top: 20px;
}

.letter {
  display: inline-block;
  padding: 1rem;
  border: 1px solid #ccc;
  color: black;
}

<h1>Raad het woord</h1>
<div id="word-display"></div>
<input type="text" id="guess-input" maxlength="5" placeholder="Enter your 5-letter guess">
<button id="submit-button" onclick="checkGuess()">Antwoord inzenden</button>
<div id="feedback"></div>

<div class="alfabet">
  <div class="letter">A</div>
  <div class="letter">B</div>
  <div class="letter">C</div>
  <div class="letter">D</div>
  <div class="letter">E</div>
  <div class="letter">F</div>
  <div class="letter">G</div>
  <div class="letter">H</div>
  <div class="letter">I</div>
  <div class="letter">J</div>
  <div class="letter">K</div>
  <div class="letter">L</div>
  <div class="letter">M</div>
  <div class="letter">N</div>
  <div class="letter">O</div>
  <div class="letter">P</div>
  <div class="letter">Q</div>
  <div class="letter">R</div>
  <div class="letter">S</div>
  <div class="letter">T</div>
  <div class="letter">U</div>
  <div class="letter">V</div>
  <div class="letter">W</div>
  <div class="letter">X</div>
  <div class="letter">Y</div>
  <div class="letter">Z</div>
</div>

Answer 1

Here is a simpler code with a more understandable output. I hope you do not mind I rewrote the code, since the supplied code was not interesting to refactor and you hadn't written it yourself anyway.

const wordList = ["lezen", "ijzer"];
let currentWordIndex = 0;
let targetWord = wordList[currentWordIndex];
let attemptsLeft = 6;

const guessesDisplay = document.getElementById('guesses-display');
const guessInput = document.getElementById('guess-input');
const feedbackDisplay = document.getElementById('feedback');

const updateGuessesDisplay = (guessedWord) => {
  let guessDiv = `<div class="guess">
    ${guessedWord.split('').map((letter, index) => {
    let className = 'wrong';
    if (letter === targetWord[index]) className = 'correct';
    else if (targetWord.includes(letter)) className = 'misplaced';
    return `<div class="${className} letter-box">${letter.toUpperCase()}</div>`;
  }).join('')}</div>`;
  guessesDisplay.innerHTML += guessDiv;
};


const nextWord = () => {
  currentWordIndex = (currentWordIndex + 1) % wordList.length;
  targetWord = wordList[currentWordIndex];
  attemptsLeft = 6;
  guessesDisplay.innerHTML = ''; // Clear the guesses display
  feedbackDisplay.textContent = '';
};


const checkGuess = (e) => {
  e.preventDefault(); // stop submission
  const guess = guessInput.value.toLowerCase();
  guessInput.value = '';

  if (guess.length !== 5 || !/^[a-z]+$/.test(guess)) {
    feedbackDisplay.textContent = "Voer aub een geldig 5-letterwoord in.";
    return;
  }

  updateGuessesDisplay(guess);
  attemptsLeft--;

  if (guess === targetWord) {
    feedbackDisplay.textContent = `Correct! Het woord was "${targetWord.toUpperCase()}".`;
    setTimeout(nextWord, 5000);
    return;
  }

  if (attemptsLeft === 0) {
    feedbackDisplay.textContent = `Het spel is afgelopen, je hebt al je pogingen gebruikt. Het juiste woord was "${targetWord.toUpperCase()}".`;
    setTimeout(nextWord, 5000);
    return;
  }

  feedbackDisplay.textContent = `Nog ${attemptsLeft} poging${attemptsLeft===1?'':'en'} over.`;
};


document.getElementById('guessForm').addEventListener('submit', checkGuess);

#guess-input { width:170px;}
.guess {
  display: flex;
  /* Aligns letter-box divs in a row */
  justify-content: center;
  /* Centers the row of letters */
  margin-bottom: 0.5rem;
  /* Spacing between each guess */
}

.letter-box {
  width: 2rem;
  /* Fixed width */
  height: 2rem;
  /* Fixed height */
  line-height: 2rem;
  /* Centers text vertically */
  border: 1px solid #ccc;
  margin: 0.1rem;
  text-align: center;
  /* Centers text horizontally */
  font-size: 1rem;
  /* Adjusts font size */
}

.correct {
  background-color: green;
}

.misplaced {
  background-color: orange;
}

.wrong {
  background-color: red;
}

<h1>Raad het woord</h1>
<div id="guesses-display"></div>
<form id="guessForm">
  <input type="text" id="guess-input" maxlength="5" placeholder="Voer uw 5-letterige woord in">
  <button id="submit-button">Woord indienen</button>
</form>
<div id="feedback"></div>