JSFiddle - React, Tailwind, and code Playground

by wewo

HTML

<textarea id="words" cols="80" rows="10" placeholder="Sem napis slova..."></textarea>
<div>
  <button id="getRandomWordButton">Daj mi nahodne slovo</button>
  <br>
  <label for="can-repeat">
    <input type="checkbox" id="can-repeat" /> Vylosované slovo sa môže opakovať
  </label>
</div>

<p>Nahodne slovo: <span id="result"></span></p>

CSS

p {
  font-size: 40px;
}

#result {
  font-weight: bold;
}

#getRandomWordButton {
  margin-bottom: 15px;
}

JavaScript

const wordsTextarea = document.getElementById('words');
const result = document.getElementById('result');
const canRepeatEl = document.getElementById('can-repeat');

const onGetRandomWord = () => {
	const canRepeatFn = !canRepeatEl.checked ? w => w != result.innerHTML : w => w;

	const words = wordsTextarea
  								.value
  								.trim()
  								.split(' ')
  								.filter(w => w.length > 0 && w != ' ')
                  .filter(canRepeatFn);

  result.innerHTML =  words[Math.floor(Math.random() * words.length)];
};

document
	.getElementById('getRandomWordButton')
  .addEventListener('click', onGetRandomWord);