Fruits

by Adrian Mejias

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
  </head>

  <body>
    <form data-form>
      <div class="words-container">
        <span data-word class="badge"></span>
        <span data-word class="badge"></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>
      <p data-message style="margin-top: 10px;"></p>
    </form>
  </body>

</html>

CSS

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

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

.badge {
  background-color: #eee;
  color: #666;
  border-radius: 5px;
  padding: 4px 8px;
  margin-right: 8px;
}

.badge:nth-child(1) {
  background-color: #ff0000;
  color: #fff;
}

[data-word] {
  background-color: #eee;
  color: #666;
  font-size: 1.5em;
}

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

class GuessTheWord {
  constructor() {
    this.words = ['apple', 'orange', 'banana', 'grape', 'lemon'];
    this.collection = [];
    this.answer = null;
  }

  async getRandomWord() {
    return new Promise((resolve) => {
      let word = this.words[Math.floor(Math.random() * this.words.length)];
      while (this.collection.includes(word)) {
        word = this.words[Math.floor(Math.random() * this.words.length)];
      }
      this.collection.push(word);
      resolve(word);
    });
  }

  onSubmit(e) {
    e.preventDefault();
    const answerElement = document.querySelector('[name="answer"]');
    const messageElement = document.querySelector('[data-message]');

    if (answerElement.value == this.answer) {
      messageElement.innerText = 'CAPTCHA passed!';
    } else {
      answerElement.value = '';
      messageElement.innerText = 'CAPTCHA failed!';
    }
  }

  async render() {
    this.answer = await this.getRandomWord();
    const dataFruitElements = document.querySelectorAll('[data-word]');
    dataFruitElements[0].innerText = await this.getRandomWord();
    dataFruitElements[1].innerText = await this.getRandomWord();

    document.querySelector('[data-form]').addEventListener('submit', this.onSubmit.bind(this));
  }
}
(async () => {
  const guessTheWord = new GuessTheWord();
  await guessTheWord.render();
})();