<div id="top" class="container">
  <header>
    <h1>Testing Umbrella JS</h1>
  </header>

  <main>
    <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>
  </main>


  <footer class="site-footer">
    <!-- <small class="colophon">Made by <a href="http://atelierbramdehaan.nl/">Atelier Bram de Haan</a>, on <a href="https://codepen.io/atelierbram/pen/GZrqrJ">on Codepen</a>.</small> -->
  </footer>
</div>
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').ajax(
	function(err){ log(err ? "Error: " + err : "Awesome! (:") },
  function(){ log('Sending... '); }
);

External CSS

  1. https://codepen.io/atelierbram/pen/zrIpq

External JavaScript

  1. https://cdn.jsdelivr.net/umbrella/2.0.0/umbrella.min.js