JSFiddle - React, Tailwind, and code Playground

by Adrian Mejias

HTML

<!doctype html>
<html>

  <head>
    <title></title>
  </head>

  <body>
    <form data-form>
      <div class="words-container">
        <span data-fruit></span>
        <span data-fruit></span>
      </div>
      <div style="margin-top: 10px;">
        <input type="text" id="answer" name="answer" placeholder="Enter the correct word" />
      </div>
      <div style="margin-top: 10px;">
        <button type="submit">
          Submit
        </button>
      </div>
    </form>
  </body>

</html>

CSS

.words-container {
  padding: 8px 16px;
}

[data-form] {
  max-width: 400px;
  margin: 20px auto;
}

[data-fruit]:nth-child(1) {
  color: #ff0000;
}

[data-fruit]:nth-child(2) {
  color: #0000ff;
}

input[type="text"] {
  background-color: #fff;
  color: #666;
  border-radius: 5px;
  border: 2px solid #ccc;
  padding: 8px 16px;
  width: 100%;
}

button[type="submit"] {
  background-color: #999;
  color: #fff;
  border-radius: 5px;
  border: 2px solid #ccc;
  padding: 8px 16px;
  width: 100%;
}

JavaScript

(() => {
  let selected = [];
  const fruits = ['apple', 'orange', 'banana', 'grape', 'lemon'];
  const getRandomFruit = () => {
    let _fruit;

    do {
      _fruit = fruits[Math.floor(Math.random() * fruits.length)];
    } while (selected.includes(_fruit));

    return _fruit;
  };
  const fruit = getRandomFruit();
  const dataWordElements = document.querySelectorAll('[data-fruit]');
  dataWordElements[0].innerText = getRandomFruit();
  dataWordElements[1].innerText = getRandomFruit();

  document.querySelector('[data-form]').addEventListener((e) => {
    e.preventDefault();
  });
})();