JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Validate Text</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container my-4">
      <h1 class="mb-4">MapX proofreader v0.1</h1>
      <small class="text-muted">AI-based Checker: Alpha Version. This prototype is intended to demonstrate the potential of the technology and its availability cannot be guaranteed at this stage.</small>
      <hr>
      <form>
        <div class="form-group">
          <label for="inputText">Text</label>
          <input type="text" class="form-control" id="inputText" placeholder="Enter text" minlength="3" maxlength="50" required>
          <div class="invalid-feedback">
            Please enter a text with length between 3 and 50 characters.
          </div>
        </div>
        <button type="button" class="btn btn-primary" onclick="validate()" disabled>Validate</button>
      </form>
      <div class="mt-4">
        <pre id="result"></pre>
      </div>
    </div>

  </body>

</html>

JavaScript

const inputText = document.getElementById('inputText');
    const button = document.querySelector('button');

    inputText.addEventListener('input', () => {
      if (inputText.checkValidity()) {
        button.disabled = false;
      } else {
        button.disabled = true;
      }
    });

    async function validate() {
      try {
        inputText.disabled = true;
        button.disabled = true;
        const response = await fetch('https://ej2rlg-3000.csb.app/validate/text', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            data: inputText.value
          })
        });
        if (response.ok) {
          const result = await response.json();
          document.getElementById('result').textContent = JSON.stringify(result, null, 2);
        } else {
          throw new Error('Validation error');
        }
      } catch (error) {
        console.error(error);
      } finally {
        inputText.disabled = false;
        button.disabled = false;
      }
    }