August 24, 2016 04:51
diff --git a/index.html b/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/[email protected]/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>
diff --git a/jsbin.zoyotam.js b/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/[email protected]/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>