Incrementing a counter with Observables

Counter with Rx.Observable

by dmitri14

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.css">
<form>
  <button type="button" class="button" id="increment">Increment</button>
  <button type="button" class="button" id="decrement">Decrement</button>
</form>
<p>
The counter value is currently: <strong id="counter"></strong>
</p>

Babel + JSX

const incrementClick$ =
	Rx.Observable.fromEvent(document.getElementById('increment'), 'click')
  .map(ev => 1);
  
const decrementClick$ = Rx.Observable.fromEvent(document.getElementById('decrement'), 'click').map(ev => -1);

const counter$ =
	// Create an Observable delivering 1 and -1 on their respective button clicks:
	Rx.Observable.merge(incrementClick$, decrementClick$)
  // Emit a 0 before any button is clicked:
	.startWith(0)
  // Then add whatever is emitted (1, -1 or 0) to whatever we had before:
  .scan((accumulator, value) => accumulator + value);

counter$.subscribe(counter => document.getElementById('counter').innerHTML = counter.toString());