informel jokes

by juliendelort

HTML

<script src="https://unpkg.com/informel"></script>

<h1>
  Fetch a joke
</h1>
<inform-el>
  <form method="GET" action="https://v2.jokeapi.dev/joke/Any">

    <label>
      Number of jokes (0 - 3)
      <inform-field>
        <input type="number" name="amount" min="1" max="3" required />
      </inform-field>
    </label>

    <label>
      Search string (optional - min 5 characters):
      <inform-field>
        <input type="text" name="contains" minlength="5" />
      </inform-field>
    </label>

    <label class="inline">
      <input type="radio" name="lang" value="en" checked />
      Jokes in English
    </label>

    <label class="inline">
      <input type="radio" name="lang" value="fr" />
      Jokes in French
    </label>

    <label>
      <inform-field default-error="Please agree">
        <input type="checkbox" name="agree" required />
        I agree with the terms <i><small>(There are no terms, just wanted to show a checkbox)</small></i>
      </inform-field>
    </label>

    <button type="submit">Get a joke</button>
    <i><small>(Try adding attribute "error-disable-submit" on &lt;inform-el/&gt;)</small></i>
  </form>
</inform-el>

<div class="status">
  <h4>
    Form status
  </h4>
  <pre id="status"></pre>
</div>

<div class="result">
  <h4>
    Result
  </h4>
  <pre id="result"></pre>
</div>

CSS

label {
  display: block;
  margin-bottom: 20px;
}
body {
  background: #f6f8fa;
  font-family: arial;
  padding: 20px;
}

inform-el {
  --error-margin: 5px 0; 
}

inform-field[error] input {
  border: 1px solid red;
}

.inline {
  display: inline-block;
}

input[type="text"],
input[type="number"] {
  display: block;
}

button[type="submit"] {
  margin-top: 20px;
}


.status, .result, form {
  background: whitesmoke;
  border: 1px solid lightgray;
  border-radius: 3px;
  margin-top: 20px;
  border-radius: 3px;
  padding: 5px;
}
h4 {
  margin: 0;
}
pre {
  white-space: break-spaces;
}

.success {
  background: #90ee9082;
}

.error {
  background: #ff000057;
}

JavaScript

/*
* The code below is merely in order to report the form status. 
* The form is fully functional without it (including data fetching). 
* Try removing it, and watch the Network tab.
*/
const resultBox = document.querySelector('#result');
const resultContainer = document.querySelector('.result');
const statusBox = document.querySelector('#status');
const informEl = document.querySelector('inform-el');

updateStatus();

// input event
document.querySelector('inform-el').addEventListener('inform-input', () => {
  updateStatus();
});

// change event
document.querySelector('inform-el').addEventListener('inform-change', () => {
  updateStatus();
});

// Request start
document.querySelector('inform-el').addEventListener('request-start', () => {
  updateStatus();
});

// Request end
document.querySelector('inform-el').addEventListener('request-end', () => {
  updateStatus();
});

// Request success
document.querySelector('inform-el').addEventListener('request-success', ({
  detail: {
    response
  }
}) => {
  resultContainer.classList.remove('error');
  resultContainer.classList.add('success');
  resultBox.textContent = JSON.stringify(response, null, '\t');
});

// Request error
document.querySelector('inform-el').addEventListener('request-error', ({
  detail: {
    response
  }
}) => {
  resultContainer.classList.add('error');
  resultContainer.classList.remove('success');
  resultBox.textContent = JSON.stringify(response, null, '\t');
});

function updateStatus() {
  setTimeout(() => {
    statusBox.textContent = JSON.stringify({
      invalid: informEl.invalid,
      dirty: informEl.dirty,
      submitting: informEl.submitting,
      values: informEl.values
    }, null, '\t');
  }, 0);
}