JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<div id="word">-</div>

	<input type="text" id="InputW">
	<input type="text" id="InputE">
	<input type="text" id="InputR">
  
<!--   <li><div id="inw1">-</div><input type="text"><input type="text"><input type="text"></li>
  <li><div id="inw2">-</div><input type="text"><input type="text"><input type="text"></li>
  <li><div id="inw3">-</div><input type="text"><input type="text"><input type="text"></li>
  <li><div id="inw4">-</div><input type="text"><input type="text"><input type="text"></li>
  <li><div id="inw5">-</div><input type="text"><input type="text"><input type="text"></li>
  <li><div id="inw6">-</div><input type="text"><input type="text"><input type="text"></li>
  <li><div id="inw7">-</div><input type="text"><input type="text"><input type="text"></li>
  <li><div id="inw8">-</div><input type="text"><input type="text"><input type="text"></li>
  <li><div id="inw9">-</div><input type="text"><input type="text"><input type="text"></li>
  <li><div id="inw10">-</div><input type="text"><input type="text"><input type="text"></li> -->

	<input type="submit" id="submit" class="submit" value="Check">

CSS

body {
  background-color: #20262E;
  color: white;
}

input{
    margin-bottom: 5px;
}

.correct{
    color:green;
}
.wrong{
    color: red;
}

JavaScript

const questionNodes = Array.from(document.getElementsByName('question'));
const submitBtn = document.getElementById('sub');
const words = [
    {
        pl: 'cześć',
        en: ['hello', 'honor', 'worship']
    }
];

let randomWord = words[0].pl; // pretend it's random

submitBtn.addEventListener('click', submitHandler);

function submitHandler(){
    const questionWord = words.find(word=>word.pl === randomWord) // can trim and lower/upercase to be safe.
    questionNodes.forEach(node=>{
        const input = node.value;
        if(questionWord.en.find(word=> word.toLowerCase() === input.trim().toLowerCase())){
            node.classList.value = 'correct';
        }
        else{
            node.classList.value = 'wrong';
        }
    })
}