RXJS - merge, map and scan etc

by Suman Kumar

HTML

<div class="container">
  <button id="increment" value="1">+</button>
  <button id="decrement" value="-1">-</button>
  <p id="output"></p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.2/Rx.min.js"></script>

JavaScript

const output = document.querySelector('#output');
const incButton = document.querySelector('#increment');
const decButton = document.querySelector('#decrement');

const inc$ = Rx.Observable.fromEvent(incButton, 'click');
const dec$ = Rx.Observable.fromEvent(decButton, 'click');

Rx.Observable.merge(inc$, dec$)
.map(event => parseInt(event.target.value))
.scan((accumulator, val) => accumulator+val, 0)
.subscribe(val => output.innerHTML = val);