JSFiddle - React, Tailwind, and code Playground

by btipling

HTML

<div id = 'letterInput'>
    </div>
    <input type = 'text' id = 'textBox' />
<br/>
Correct:
<div id = 'correctLetters'>

    </div>
<br/>
Incorrect
    <div id = 'incorrectLetters'>

    </div>

JavaScript

var words = ['dog', 'computer', 'cat', 'monkey', 'human'];

var wordForGuess = chooseWord();

var wordLength = wordForGuess.length;

function chooseWord () {
  return words[Math.floor(Math.random() * words.length)];
}

function writeWord() {
  var input, textarea;

    input = document.getElementById('textBox')
    textarea = input.value;
    input.value = "";
    console.log("writing word", textarea);

    if (wordForGuess.indexOf(textarea) !== -1) {
        document.getElementById('correctLetters').innerText += textarea;
    } else {
        document.getElementById('incorrectLetters').innerText += textarea;
    }
}

document.getElementById("textBox").onkeyup = writeWord;