JSFiddle - React, Tailwind, and code Playground

by IllusionMH

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/bacon.js/0.7.53/Bacon.min.js"></script>
<input type="text" id="tst1" value="31" />
<input type="text" id="tst2" value="11" />
<input type="text" id="tst3" value="12" />
<input type="button" id="tstb" disabled value="press me">

JavaScript

var value1 = function() {
    return $('#tst1').val();
};
var value2 = function() {
    return $('#tst2').val();
};

var value3 = function() {
    return $('#tst3').val();
};

var validationFunction = function() {
    var i1 = parseInt(value1()) > 10;
    var i2 = parseInt(value2()) > 10;
    var i3 = parseInt(value3()) > 10;
    return i1 && i2 && i3;
};

var inputStream1 = $('#tst1').asEventStream('input change').debounce(100);
var inputStream2 = $('#tst2').asEventStream('input change').debounce(100);
var inputStream3 = $('#tst3').asEventStream('input change').debounce(100);

var changedStream1 = inputStream1.map(true);
var changedStream2 = inputStream2.map(true);
var changedStream3 = inputStream3.map(true);

var changedProperty1 = changedStream1.toProperty(!!value1());
var changedProperty2 = changedStream2.toProperty(!!value2());
var changedProperty3 = changedStream3.toProperty(!!value3());

var allEdited = changedProperty1.and(changedProperty2).and(changedProperty3);

var isValid = allEdited.map(validationFunction);
allEdited.log('allEdited')
isValid.log('valid')

//side effects
var buttonDisabled = isValid.not();
buttonDisabled.assign($("#tstb"), "attr", "disabled")