How to make multiple contenteditable divs turn green if word is correct?

Question

I have been trying to creating a wordle game for some time now, but I do not know how I would make it so if the word that the user inputs is correct, the boxes turn green. Same thing if the user inputs a letter that is correct but in the wrong position, it turns yellow. Lets say the word is "absolute", if the user guesses the word absolute, all boxes turn green, but if only one letter is correct from the user input, it turns only one box green or yellow depending on the position of the letter. Here is some of my code, I will link the rest below

   let keys = document.getElementById('keyboard-totality').querySelectorAll(".key-button");
   keys.forEach(key => {
       key.addEventListener('click', e => {
           if (e.target.id == 'DEL') {
               document.getElementById('amo1').lastChild.remove();
           }
           else {
               document.getElementById('amo1').innerHTML += (e.target.value + '</div>');
           }

       })

   });

function addOnNextElement(key,target){
       console.log(key);
       if(target.nextElementSibling.innerHTML == ""){
           target.nextElementSibling.innerHTML = key;
       }
       else{
           addOnNextElement(key,target.nextElementSibling);
       }
   }


function clickFunction() {

 document.getElementsByClassName("amot")[0].style.color = "red";
 document.getElementsByClassName("amot")[0].style.backgroundColor = "black";
 document.getElementsByClassName("amot")[1].style.color = "red";
 document.getElementsByClassName("amot")[1].style.backgroundColor = "black";
 document.getElementsByClassName("amot")[2].style.color = "red";
 document.getElementsByClassName("amot")[2].style.backgroundColor = "black";
 document.getElementsByClassName("amot")[3].style.color = "red";
 document.getElementsByClassName("amot")[3].style.backgroundColor = "black";
 document.getElementsByClassName("amot")[4].style.color = "red";
 document.getElementsByClassName("amot")[4].style.backgroundColor = "black";
 document.getElementsByClassName("amot")[5].style.color = "red";
 document.getElementsByClassName("amot")[5].style.backgroundColor = "black";
 document.getElementsByClassName("amot")[6].style.color = "red";
 document.getElementsByClassName("amot")[6].style.backgroundColor = "black";
 document.getElementsByClassName("amot")[7].style.color = "red";
 document.getElementsByClassName("amot")[7].style.backgroundColor = "black";

}
  document.addEventListener("keydown", KeyCheck);
function KeyCheck(event)
{
 var KeyID = event.keyCode;
 switch(KeyID)
 {
  case 8:

  event.target.previousElementSibling.focus();
  event.target.lastChild.remove();

  break;

  case 13:

  clickFunction(); ani();

  break;

  case 27:

  alert("Are you sure you want to leave?")
  window.close();

  case 46:

  event.target.previousElementSibling.focus();
  event.target.lastChild.remove();

  break;

  default:
  break;

}

}

Here is the rest of my code that includes the HTML, CSS, and JS: https://code.sololearn.com/WX59M6HHngc5 Edit: Added some more code to the sololearn project, thanks to c0dm1tu

Answer 1

A good beginning for your project would be to separate words by rows in your code to test them one by one.

let answer = "word";

function checkLettersOfRow(row){
    let letters = row.getElementsByClassName("letter");
    for (let i = 0; i < letters.length; i++) {
        if(answer.includes(letters[i].textContent)){
            if(answer.indexOf(letters[i].textContent) == i ){
                letters[i].classList.add("correct-place");
            }else{
                letters[i].classList.add("wrong-place");
            }
        }
    }
}

let rows = document.getElementsByClassName("row");
checkLettersOfRow(rows[0])

.row .letter{
    display:inline-block;
}

.correct-place{
    color:white;
    background-color:green;
}
.wrong-place{
    color:white;
    background-color:orange;
}

<div class="row">
  <div class="letter">w</div>
  <div class="letter">i</div>
  <div class="letter">k</div>
  <div class="letter">i</div>
  <div class="letter">p</div>
  <div class="letter">e</div>
  <div class="letter">d</div>
  <div class="letter">i</div>
  <div class="letter">a</div>
  <div class="letter"></div>
  <div class="letter"></div>
</div>