JSFiddle - React, Tailwind, and code Playground

by pdoherty926

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/bacon.js/0.7.22/Bacon.min.js"></script>
<button id='plus'>plus</button>
<button id='minus'>minus</button>
<input id='sum' type='text' value='0' />
<div>Last 10: <span id='history'></span>
</div>

JavaScript

var plus = $("#plus").asEventStream("click").map(1);
var minus = $("#minus").asEventStream("click").map(-1);
var both = plus.merge(minus);

/*
streams
---1-----1---1 => plus
-(-1)-----(-1)---(-1)-- => minus
-(-1)-1---(-1)-1-(-1)-1 => both
*/

function add(x, y) {
    return x + y
}

var counter = both.scan(0, add); // reduce
counter.assign($("#sum"), "val")

var history = counter.slidingWindow(10);
history.assign($("#history"), "text");

both.log("New event in both")
counter.log("New event in counter")