JSFiddle - React, Tailwind, and code Playground

by phsiao2000

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/bacon.js/0.3.15/Bacon.min.js"></script>
     <h1>bacon.js example page</h1>
    <div>
      <h2>Simplest example:</h2>
      <span id="clikme">click me</span>
    </div>
    <div>
      <h2>Combinators example:</h2>
      SPACEBAR value=<span id="spacebar-value"></span>
    </div>
    <div id="enabling">
      <h2>Enable/disable example:</h2>
      <input type="text" placeholder="required field">
      <button>Don't push me</button>

JavaScript

$(function() {
        function isEmpty(s) { return s.length == 0 }

        function always(value) { return function() { return value }}
        
        function keyCodeIs(keyCode) { 
          return function(event) { return event.keyCode == keyCode }
        }

        function keyDownEvents(keyCode) { 
          return $(document).asEventStream("keydown").filter(keyCodeIs(keyCode))
        }

        function keyUpEvents(keyCode) { 
          return $(document).asEventStream("keyup").filter(keyCodeIs(keyCode))
        }

        function keyStateProperty(keyCode) { 
          return keyDownEvents(keyCode).map(always("DOWN"))
            .merge(keyUpEvents(keyCode).map(always("UP")))
            .toProperty("UP")
        }

        $("#clikme")
          .asEventStream("click")
          .subscribe(function(event) { alert("mmmm... bacon!") })

        keyStateProperty(32)
          .onValue(function(value) { $("#spacebar-value").text(value) })

        $("#enabling input")
          .asEventStream("keyup")
          .map(function(event) { return $(event.target).val() })
          .toProperty("")
          .map(isEmpty)
          .assign($("#enabling button"), "attr", "disabled")
      })