Umbrella JS

Sandbox for Umbrella JS

by Francisco Presencia Fandos

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/picnicss/4.1.3/picnic.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umbrella.min.js"></script>
<button class="click">Randomly click me</button>

<hr>

<form method="POST" action="/echo/json/">
  <input name="name" placeholder="Your Name">
  <select>
    <option>Cheese</option>
    <option>Ham</option>
    <option>Tomato</option>
  </select>
  <label>
    <input id="checkable" type="checkbox">
    <span class="checkable">Check me out (;</span>
  </label><br>
  <input type="submit" value="Send it!">
</form>

<pre>
_________
log
</pre>

CSS

/* Using Picnic CSS (http://picnicss.com/) for styles */
body {
  margin: 1em auto;
  width: calc(100% - 2.6em);
  max-width: 800px;
}
input, select { margin: .3em 0; }

JavaScript

// Just a small logger
var i = 0;
function log(msg){ u('pre').prepend((++i) + '. ' + msg + '\n'); };

u('.click').on('click', function(){
	log("Thanks! There are " + u('input').nodes.length + " inputs");
});

u('[name="name"]').on('change keyup', function(e){
	log("Hey, " + (this.value ? this.value : "John Doe"));
});

u('select').on('change keyup', function(e){
	log(this.value + " looks delicious");
});

u('#checkable').on('change', function(e){
	log("Am I checked? " + u(this).is(':checked'));
});

// Both callbacks are optional, check the calls (F12)
u('form').handle('submit', async e => {
  log('Sending... ');
  const form = u(e.target);
  try {
  	await fetch(form.attr('action'), {
    	method: form.attr('method'),
      body: form.serialize()
    });
    log("Awesome! (:");
  } catch (error) {
    log("Error: " + error);
  }
});