/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="mapTo">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://npmcdn.com/@reactivex/rxjs@5.0.0-beta.1/dist/global/Rx.umd.js"></script>
  <title>JS Bin</title>
</head>
<body>

  <button id="startBtn">Start</button>
  <button id="stopBtn">Stop</button>
  <button id="resetBtn">Reset</button>

  <div id="counter"></div>
<script id="jsbin-javascript">
// You often need to handle multiple user interactions set to
// different streams. This lesson shows hows Observable.merge
// behaves like a "logical OR" to have your stream handle one
// interaction OR another.

const Observable = Rx.Observable;

const startButton = document.querySelector('#startBtn');
const stopButton = document.querySelector('#stopBtn');
const resetButton = document.querySelector('#resetBtn');
const counter = document.querySelector('#counter');

const start$ = Observable.fromEvent(startButton, 'click');
const stop$ = Observable.fromEvent(stopButton, 'click');
const reset$ = Observable.fromEvent(resetButton, 'click');
const interval$ = Observable.interval(1000);

const intervalThatStops$ = interval$.takeUntil(stop$);

const data = {count: 0};
const inc = (acc) => ({count: acc.count + 1});
const resetData = (acc) => data;

// take an observable and then switch to other observable
const startInterval$ = start$
    .switchMapTo(
      Observable.merge(
        intervalThatStops$.mapTo(inc),
        reset$.mapTo(resetData)
      )
    )
    .startWith(data) // init scan start value
    .scan((acc, curr) => { // scan is used to gather data
      return curr(acc);
    })
    .subscribe((x) => counter.textContent = x.count);


</script>


<script id="jsbin-source-javascript" type="text/javascript">// You often need to handle multiple user interactions set to
// different streams. This lesson shows hows Observable.merge
// behaves like a "logical OR" to have your stream handle one
// interaction OR another.

const Observable = Rx.Observable;

const startButton = document.querySelector('#startBtn');
const stopButton = document.querySelector('#stopBtn');
const resetButton = document.querySelector('#resetBtn');
const counter = document.querySelector('#counter');

const start$ = Observable.fromEvent(startButton, 'click');
const stop$ = Observable.fromEvent(stopButton, 'click');
const reset$ = Observable.fromEvent(resetButton, 'click');
const interval$ = Observable.interval(1000);

const intervalThatStops$ = interval$.takeUntil(stop$);

const data = {count: 0};
const inc = (acc) => ({count: acc.count + 1});
const resetData = (acc) => data;

// take an observable and then switch to other observable
const startInterval$ = start$
    .switchMapTo(
      Observable.merge(
        intervalThatStops$.mapTo(inc),
        reset$.mapTo(resetData)
      )
    )
    .startWith(data) // init scan start value
    .scan((acc, curr) => { // scan is used to gather data
      return curr(acc);
    })
    .subscribe((x) => counter.textContent = x.count);


</script></body>
</html>

## jsbin.zoyotam.js
// You often need to handle multiple user interactions set to
// different streams. This lesson shows hows Observable.merge
// behaves like a "logical OR" to have your stream handle one
// interaction OR another.

const Observable = Rx.Observable;

const startButton = document.querySelector('#startBtn');
const stopButton = document.querySelector('#stopBtn');
const resetButton = document.querySelector('#resetBtn');
const counter = document.querySelector('#counter');

const start$ = Observable.fromEvent(startButton, 'click');
const stop$ = Observable.fromEvent(stopButton, 'click');
const reset$ = Observable.fromEvent(resetButton, 'click');
const interval$ = Observable.interval(1000);

const intervalThatStops$ = interval$.takeUntil(stop$);

const data = {count: 0};
const inc = (acc) => ({count: acc.count + 1});
const resetData = (acc) => data;

// take an observable and then switch to other observable
const startInterval$ = start$
    .switchMapTo(
      Observable.merge(
        intervalThatStops$.mapTo(inc),
        reset$.mapTo(resetData)
      )
    )
    .startWith(data) // init scan start value
    .scan((acc, curr) => { // scan is used to gather data
      return curr(acc);
    })
    .subscribe((x) => counter.textContent = x.count);
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="mapTo">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<script src="https://npmcdn.com/@reactivex/rxjs@5.0.0-beta.1/dist/global/Rx.umd.js"></script>
	<title>JS Bin</title>
	</head>
	<body>

	<button id="startBtn">Start</button>
	<button id="stopBtn">Stop</button>
	<button id="resetBtn">Reset</button>

	<div id="counter"></div>
	<script id="jsbin-javascript">
	// You often need to handle multiple user interactions set to
	// different streams. This lesson shows hows Observable.merge
	// behaves like a "logical OR" to have your stream handle one
	// interaction OR another.

	const Observable = Rx.Observable;

	const startButton = document.querySelector('#startBtn');
	const stopButton = document.querySelector('#stopBtn');
	const resetButton = document.querySelector('#resetBtn');
	const counter = document.querySelector('#counter');

	const start$ = Observable.fromEvent(startButton, 'click');
	const stop$ = Observable.fromEvent(stopButton, 'click');
	const reset$ = Observable.fromEvent(resetButton, 'click');
	const interval$ = Observable.interval(1000);

	const intervalThatStops$ = interval$.takeUntil(stop$);

	const data = {count: 0};
	const inc = (acc) => ({count: acc.count + 1});
	const resetData = (acc) => data;

	// take an observable and then switch to other observable
	const startInterval$ = start$
	.switchMapTo(
	Observable.merge(
	intervalThatStops$.mapTo(inc),
	reset$.mapTo(resetData)
	)
	)
	.startWith(data) // init scan start value
	.scan((acc, curr) => { // scan is used to gather data
	return curr(acc);
	})
	.subscribe((x) => counter.textContent = x.count);








	</script>



	<script id="jsbin-source-javascript" type="text/javascript">// You often need to handle multiple user interactions set to
	// different streams. This lesson shows hows Observable.merge
	// behaves like a "logical OR" to have your stream handle one
	// interaction OR another.

	const Observable = Rx.Observable;

	const startButton = document.querySelector('#startBtn');
	const stopButton = document.querySelector('#stopBtn');
	const resetButton = document.querySelector('#resetBtn');
	const counter = document.querySelector('#counter');

	const start$ = Observable.fromEvent(startButton, 'click');
	const stop$ = Observable.fromEvent(stopButton, 'click');
	const reset$ = Observable.fromEvent(resetButton, 'click');
	const interval$ = Observable.interval(1000);

	const intervalThatStops$ = interval$.takeUntil(stop$);

	const data = {count: 0};
	const inc = (acc) => ({count: acc.count + 1});
	const resetData = (acc) => data;

	// take an observable and then switch to other observable
	const startInterval$ = start$
	.switchMapTo(
	Observable.merge(
	intervalThatStops$.mapTo(inc),
	reset$.mapTo(resetData)
	)
	)
	.startWith(data) // init scan start value
	.scan((acc, curr) => { // scan is used to gather data
	return curr(acc);
	})
	.subscribe((x) => counter.textContent = x.count);







	</script></body>
	</html>