Olgagr/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <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="start">Start</button>
<button id="half">Half</button>
<button id="quarter">Quarter</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>

<hr>

<input type="text" id="input">

<div>Score: <span id="score"></span></div>


<script id="jsbin-javascript">
// stream can have multiple subscription. To share the stream amoung all
// of them, we can use share operator.

const Observable = Rx.Observable;

const startButton = document.querySelector('#start');
const halfButton = document.querySelector('#half');
const quarterButton = document.querySelector('#quarter');

const stopButton = document.querySelector('#stop');
const resetButton = document.querySelector('#reset');

const input = document.querySelector('#input');

const start$ = Observable.fromEvent(startButton, 'click');
const half$ = Observable.fromEvent(halfButton, 'click');
const quarter$ = Observable.fromEvent(quarterButton, 'click');

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

const input$ = Observable.fromEvent(input, 'input')
    .map(event => event.target.value);


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

const starters$ = Observable.merge(
    start$.mapTo(1000),
    half$.mapTo(500),
    quarter$.mapTo(250)
).share();

const intervalActions = (time)=> Observable.merge(
    Observable.interval(time)
        .takeUntil(stop$).mapTo(inc),
    reset$.mapTo(reset)
);

const timer$ = starters$
    .switchMap(intervalActions)
    .startWith(data)
    .scan((acc, curr)=> curr(acc))


const runningGame$ = timer$
    .do((x)=> console.log(x))
    .takeWhile((data)=> data.count <= 3)

    .withLatestFrom(
        input$.do((x)=> console.log(x)),
        (timer, input)=> ({count: timer.count, text: input})
    )
    .share();

starters$
    .subscribe(()=> {
        input.focus();
        document.querySelector('#score').innerHTML = ``;
        input.value = "";
    })

runningGame$
    .repeat()
    .subscribe(()=> input.value = "")


runningGame$
    .filter((data)=> data.count === parseInt(data.text))
    .reduce((acc, curr)=> acc + 1, 0)
    .repeat()
    .subscribe(
        (x)=> document.querySelector('#score').innerHTML = `
            ${x}
        `,
        err=> console.log(err),
        ()=> console.log('complete')
    );
</script>


<script id="jsbin-source-javascript" type="text/javascript">// stream can have multiple subscription. To share the stream amoung all
// of them, we can use share operator.

const Observable = Rx.Observable;

const startButton = document.querySelector('#start');
const halfButton = document.querySelector('#half');
const quarterButton = document.querySelector('#quarter');

const stopButton = document.querySelector('#stop');
const resetButton = document.querySelector('#reset');

const input = document.querySelector('#input');

const start$ = Observable.fromEvent(startButton, 'click');
const half$ = Observable.fromEvent(halfButton, 'click');
const quarter$ = Observable.fromEvent(quarterButton, 'click');

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

const input$ = Observable.fromEvent(input, 'input')
    .map(event => event.target.value);


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

const starters$ = Observable.merge(
    start$.mapTo(1000),
    half$.mapTo(500),
    quarter$.mapTo(250)
).share();

const intervalActions = (time)=> Observable.merge(
    Observable.interval(time)
        .takeUntil(stop$).mapTo(inc),
    reset$.mapTo(reset)
);

const timer$ = starters$
    .switchMap(intervalActions)
    .startWith(data)
    .scan((acc, curr)=> curr(acc))


const runningGame$ = timer$
    .do((x)=> console.log(x))
    .takeWhile((data)=> data.count <= 3)

    .withLatestFrom(
        input$.do((x)=> console.log(x)),
        (timer, input)=> ({count: timer.count, text: input})
    )
    .share();

starters$
    .subscribe(()=> {
        input.focus();
        document.querySelector('#score').innerHTML = ``;
        input.value = "";
    })

runningGame$
    .repeat()
    .subscribe(()=> input.value = "")


runningGame$
    .filter((data)=> data.count === parseInt(data.text))
    .reduce((acc, curr)=> acc + 1, 0)
    .repeat()
    .subscribe(
        (x)=> document.querySelector('#score').innerHTML = `
            ${x}
        `,
        err=> console.log(err),
        ()=> console.log('complete')
    );
</script></body>
</html>

## jsbin.tocukac.js
// stream can have multiple subscription. To share the stream amoung all
// of them, we can use share operator.

const Observable = Rx.Observable;

const startButton = document.querySelector('#start');
const halfButton = document.querySelector('#half');
const quarterButton = document.querySelector('#quarter');

const stopButton = document.querySelector('#stop');
const resetButton = document.querySelector('#reset');

const input = document.querySelector('#input');

const start$ = Observable.fromEvent(startButton, 'click');
const half$ = Observable.fromEvent(halfButton, 'click');
const quarter$ = Observable.fromEvent(quarterButton, 'click');

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

const input$ = Observable.fromEvent(input, 'input')
    .map(event => event.target.value);


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

const starters$ = Observable.merge(
    start$.mapTo(1000),
    half$.mapTo(500),
    quarter$.mapTo(250)
).share();

const intervalActions = (time)=> Observable.merge(
    Observable.interval(time)
        .takeUntil(stop$).mapTo(inc),
    reset$.mapTo(reset)
);

const timer$ = starters$
    .switchMap(intervalActions)
    .startWith(data)
    .scan((acc, curr)=> curr(acc))


const runningGame$ = timer$
    .do((x)=> console.log(x))
    .takeWhile((data)=> data.count <= 3)

    .withLatestFrom(
        input$.do((x)=> console.log(x)),
        (timer, input)=> ({count: timer.count, text: input})
    )
    .share();

starters$
    .subscribe(()=> {
        input.focus();
        document.querySelector('#score').innerHTML = ``;
        input.value = "";
    })

runningGame$
    .repeat()
    .subscribe(()=> input.value = "")


runningGame$
    .filter((data)=> data.count === parseInt(data.text))
    .reduce((acc, curr)=> acc + 1, 0)
    .repeat()
    .subscribe(
        (x)=> document.querySelector('#score').innerHTML = `
            ${x}
        `,
        err=> console.log(err),
        ()=> console.log('complete')
    );
	<!DOCTYPE html>
	<html>
	<head>
	<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="start">Start</button>
	<button id="half">Half</button>
	<button id="quarter">Quarter</button>
	<button id="stop">Stop</button>
	<button id="reset">Reset</button>

	<hr>

	<input type="text" id="input">

	<div>Score: <span id="score"></span></div>



	<script id="jsbin-javascript">
	// stream can have multiple subscription. To share the stream amoung all
	// of them, we can use share operator.

	const Observable = Rx.Observable;

	const startButton = document.querySelector('#start');
	const halfButton = document.querySelector('#half');
	const quarterButton = document.querySelector('#quarter');

	const stopButton = document.querySelector('#stop');
	const resetButton = document.querySelector('#reset');

	const input = document.querySelector('#input');

	const start$ = Observable.fromEvent(startButton, 'click');
	const half$ = Observable.fromEvent(halfButton, 'click');
	const quarter$ = Observable.fromEvent(quarterButton, 'click');

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

	const input$ = Observable.fromEvent(input, 'input')
	.map(event => event.target.value);


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

	const starters$ = Observable.merge(
	start$.mapTo(1000),
	half$.mapTo(500),
	quarter$.mapTo(250)
	).share();

	const intervalActions = (time)=> Observable.merge(
	Observable.interval(time)
	.takeUntil(stop$).mapTo(inc),
	reset$.mapTo(reset)
	);

	const timer$ = starters$
	.switchMap(intervalActions)
	.startWith(data)
	.scan((acc, curr)=> curr(acc))



	const runningGame$ = timer$
	.do((x)=> console.log(x))
	.takeWhile((data)=> data.count <= 3)

	.withLatestFrom(
	input$.do((x)=> console.log(x)),
	(timer, input)=> ({count: timer.count, text: input})
	)
	.share();

	starters$
	.subscribe(()=> {
	input.focus();
	document.querySelector('#score').innerHTML = ``;
	input.value = "";
	})

	runningGame$
	.repeat()
	.subscribe(()=> input.value = "")


	runningGame$
	.filter((data)=> data.count === parseInt(data.text))
	.reduce((acc, curr)=> acc + 1, 0)
	.repeat()
	.subscribe(
	(x)=> document.querySelector('#score').innerHTML = `
	${x}
	`,
	err=> console.log(err),
	()=> console.log('complete')
	);
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">// stream can have multiple subscription. To share the stream amoung all
	// of them, we can use share operator.

	const Observable = Rx.Observable;

	const startButton = document.querySelector('#start');
	const halfButton = document.querySelector('#half');
	const quarterButton = document.querySelector('#quarter');

	const stopButton = document.querySelector('#stop');
	const resetButton = document.querySelector('#reset');

	const input = document.querySelector('#input');

	const start$ = Observable.fromEvent(startButton, 'click');
	const half$ = Observable.fromEvent(halfButton, 'click');
	const quarter$ = Observable.fromEvent(quarterButton, 'click');

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

	const input$ = Observable.fromEvent(input, 'input')
	.map(event => event.target.value);


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

	const starters$ = Observable.merge(
	start$.mapTo(1000),
	half$.mapTo(500),
	quarter$.mapTo(250)
	).share();

	const intervalActions = (time)=> Observable.merge(
	Observable.interval(time)
	.takeUntil(stop$).mapTo(inc),
	reset$.mapTo(reset)
	);

	const timer$ = starters$
	.switchMap(intervalActions)
	.startWith(data)
	.scan((acc, curr)=> curr(acc))



	const runningGame$ = timer$
	.do((x)=> console.log(x))
	.takeWhile((data)=> data.count <= 3)

	.withLatestFrom(
	input$.do((x)=> console.log(x)),
	(timer, input)=> ({count: timer.count, text: input})
	)
	.share();

	starters$
	.subscribe(()=> {
	input.focus();
	document.querySelector('#score').innerHTML = ``;
	input.value = "";
	})

	runningGame$
	.repeat()
	.subscribe(()=> input.value = "")


	runningGame$
	.filter((data)=> data.count === parseInt(data.text))
	.reduce((acc, curr)=> acc + 1, 0)
	.repeat()
	.subscribe(
	(x)=> document.querySelector('#score').innerHTML = `
	${x}
	`,
	err=> console.log(err),
	()=> console.log('complete')
	);
	</script></body>
	</html>