JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<div id="word1">-</div>
	<input type="text" id="InputW1">
	<input type="text" id="InputE1">
	<input type="text" id="InputR1">
  
  <div id="word2">-</div>
  <input type="text" id="InputW2">
	<input type="text" id="InputE2">
	<input type="text" id="InputR2">


	<input type="submit" id="submit" class="submit" value="Check">
  <div id="test"></div>

CSS

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

li{
  list-style-type: none;
}

input{
  margin: 5px 2px;
}

div{
 display: inline-block;
}

JavaScript

var words = [
{q: 'Q', w: 'q1',	e: 'q2',	r: 'q3'},
{q: 'W', w: 'w1',	e: 'w2',	r: 'w3'},
{q: 'E', w: 'e1',	e: 'e2',	r: 'e3'},
{q: 'R', w: 'r1',	e: 'r2',	r: 'r3'},
{q: 'T', w: 't1',	e: 't2',	r: 't3'},
{q: 'Y', w: 'y1',	e: 'y2',	r: 'y3'},
{q: 'U', w: 'u1',	e: 'u2',	r: 'u3'},
{q: 'I', w: 'i1',	e: 'i2',	r: 'i3'},
{q: 'O', w: 'o1',	e: 'o2',	r: 'o3'},
{q: 'P', w: 'p1',	e: 'p2',	r: 'p3'},
]

	const word = document.getElementById('word');
  const inputW1 = document.getElementById('InputW1');
  const inputE1 = document.getElementById('InputE1');
  const inputR1 = document.getElementById('InputR1');
	const submit = document.getElementById('submit');

function randIndex() {
  return Math.floor(Math.random() * words.length);
}

function randWord() {
	currentIndex = randIndex();
  word.innerText = words[currentIndex].q;
}

submit.addEventListener("click", function () { 
  const inputValueW = document.getElementById('InputW').value;
  const inputValueE = document.getElementById('InputE').value;
  const inputValueR = document.getElementById('InputR').value;
  const matchingW = words.find(word => word.q === randomWord).w;
  const matchingE = words.find(word => word.q === randomWord).e;
  const matchingR = words.find(word => word.q === randomWord).r;
    
    if (inputValueW === matchingW && inputValueE === matchingE &&
    inputValueR === matchingR) {
    	randWord();
      	inputW.value = '';
    		inputE.value = '';
    		inputR.value = '';
    }
    
    else if (inputValueW != matchingW || inputValueE != matchingE ||
    inputValueR != matchingR) {    
    	test.innerText = matchingW+" "+matchingE+" "+matchingR;
    }
  });

randWord();