JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<section id="sect2">
   
    <div class="a1 b1" id="word"></div>

      <li><input type="text" id="Input" class="form">
        <div id="answer"></div>
      </li>
   
      <div id="test"></div>

      <div class="bt center" id="submit">Submit</div>


    <div id="counter" style="text-align: center;"></div>
    
  </section>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 5% 0;
  min-height: 1000px;
  font-family: 'Poppins', sans-serif;
  text-align: center;
  background-color: #20262E;
  color: white;
}

JavaScript

var words = [
{w: 'be', e: 'was, were', r: 'been'},
{w: 'begin', e: 'began', r: 'begun'},
{w: 'break', e: 'broke', r: 'broken'},
{w: 'boy', e: 'bought', r: 'bought'},
{w: 'can', e: 'could', r: 'been able to'},
{w: 'come', e: 'came', r: 'come'},
{w: 'do (does)', e: 'did', r: 'done'},
{w: 'drink', e: 'drank', r: 'drunk'},
{w: 'drive', e: 'drove', r: 'driven'},
{w: 'eat', e: 'ate', r: 'eaten'},
{w: 'find', e: 'found', r: 'found'},
{w: 'get', e: 'got', r: 'got'},
{w: 'give', e: 'gave', r: 'given'},
{w: 'go', e: 'went', r: 'gone'},
{w: 'have', e: 'had', r: 'had'},
{w: 'hear', e: 'heard', r: 'heard'},
{w: 'know', e: 'knew', r: 'known'},
{w: 'learn', e: 'learned', r: 'learned'},
{w: 'leave', e: 'left', r: 'left'},
{w: 'lose', e: 'lost', r: 'lost'},
{w: 'make', e: 'made', r: 'made'},
{w: 'meet', e: 'met', r: 'met'},
{w: 'pay', e: 'paid', r: 'paid'},
{w: 'read', e: 'read', r: 'read'},
{w: 'say', e: 'said', r: 'said'},
{w: 'see', e: 'saw', r: 'seen'},
{w: 'send', e: 'sent', r: 'sent'},
{w: 'sit', e: 'sat', r: 'sat'},
{w: 'sleep', e: 'slept', r: 'slept'},
{w: 'speak', e: 'spoke', r: 'spoken'},
{w: 'swim', e: 'swam', r: 'swum'},
{w: 'take', e: 'took', r: 'taken'},
{w: 'tell', e: 'told', r: 'told'},
{w: 'think', e: 'thought', r: 'thought'},
{w: 'wear', e: 'wore', r: 'worn'},
{w: 'write', e: 'wrote', r: 'written'},
]

const foo = () => {
  const word = document.getElementById('word');
	const test = document.getElementById('test');
  const Input = document.getElementById('Input');
	const submit = document.getElementById('submit');
  
  let randomWord = null;

  const num = () => Math.floor(Math.random() * words.length);
  const postWord = () =>  randomWord = word.innerText = words[num()].w;
  
  const numm = () => Math.floor(Math.random() * 3);

  postWord();
  
  submit.addEventListener('click', () => {
    const inputValue = document.getElementById('Input').value;
    const matchingSim = words.find(word => word.w === randomWord).e;
    const matchingPar = words.find(word =>...