JSFiddle - React, Tailwind, and code Playground

by michaelsbradleyjr

HTML

<script src="https://github.com/brownplt/flapjax/raw/master/website/static/download/flapjax-2.1.js"></script>
<p>x and y are true? &nbsp;::&nbsp; <span id="and"></span></p>
<br />
<p>x or y is true? &nbsp;::&nbsp; <span id="or"></span></p>
<br /><br />
<p>x = <span id="x"></span></p>
<p>y = <span id="y"></span></p>

<script id="ghost" type="application/json">
    { "someKey" : "amazing truly amazing! counter: ", "counter" : 1 }
</script>
<br /><br />
<div id="container"></div>

JavaScript

var x = receiverE();
var y = receiverE();

var xx = startsWith(x, true);
var yy = startsWith(y, true);

x.delayE(725).mapE(function(evt) {
    x.sendEvent(evt ? 0 : 1);
});

y.delayE(125).mapE(function(evt) {
    y.sendEvent(evt ? 0 : 1);
});

insertValueB(xx, 'x', 'innerHTML');
insertValueB(yy, 'y', 'innerHTML');

insertValueB(andB(xx, yy), 'and', 'innerHTML');
insertValueB(orB(xx, yy), 'or', 'innerHTML');

x.sendEvent(1);
y.sendEvent(0);

/* ------- */

var ghost = document.getElementById('ghost');

var ghostE = $E('ghost', 'DOMNodeInserted');
var ghostModE = ghostE.delayE(100).mapE(function(evt) {
    var obj = JSON.parse(evt.target.data);
    ghost.innerHTML = JSON.stringify({
    someKey: 'GREAT things are happening!! counter: ',
    counter: obj.counter + 1 });
    return obj.someKey + obj.counter;
});
var ContentsB = startsWith(ghostModE, JSON.parse(ghost.innerHTML).someKey + JSON.parse(ghost.innerHTML).counter);

var myParaB = P(ContentsB);
insertDomB(myParaB, 'container');

ghost.innerHTML = JSON.stringify({
    someKey: 'another value!!! counter: ',
    counter: 2
});