from

RxJS 5 from

by Echyzen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.2.1/rxjs.umd.js"></script>
<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>
<div class="container">
    <div class="alert alert-info">
         <Button id="plus">+</Button>
         <Button id="minus">-</Button>
         Count: <span id="result">0</span>
    </div>
</div>

CSS

body {
    font-family: sans-serif;
    padding: 10px;
}
h2 {
    font-weight: bold;
    display: inline-block;
    margin-left: 20px;
}
.header {
    background: #ECECEC;
    padding: 5px;
}

JavaScript

const plusEl = document.querySelector('#plus')
const minusEl = document.querySelector('#minus')
const counterEl = document.querySelector('#result')

const plusStream$ = rxjs.fromEvent(plusEl, 'click')
const minusStream$ = rxjs.fromEvent(minusEl, 'click')

const plus$ = plusStream$.pipe(rxjs.operators.mapTo(1))
const minus$ = minusStream$.pipe(rxjs.operators.mapTo(-1))
const source$ = plus$.pipe(rxjs.operators.merge(minus$))

source$
    .pipe(
    	rxjs.operators.scan((acc, v) => {
        return acc + v
			}, 0)
    )
    .subscribe((val) => {
        counterEl.innerHTML = val
    });