lionelB/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Pausable Timer</title>
  <script src="https://unpkg.com/@reactivex/rxjs@5.1.1/dist/global/Rx.js"></script>
</head>
<body>
  <button class="start5">start 5</button>
  <button class="reset">reset</button>
  <button class="pause">pause</button>
  <code class="render"></code>
<script id="jsbin-javascript">
'use strict';

var start5Bt = document.querySelector('.start5');
var pauseBt = document.querySelector('.pause');
var view = document.querySelector('.render');

var dec = function dec(acc) {
  return acc - 1;
};
var pause = function pause(val) {
  return val.pause / 1000;
};
var start = function start(val) {
  return val.duration / 1000;
};

var start5$ = Rx.Observable.fromEvent(start5Bt, 'click').map(function () {
  return 5;
});
var pause$ = Rx.Observable.fromEvent(pauseBt, 'click').map(function () {
  return 2;
});
var interval$ = Rx.Observable.interval(1000);

var render = function render(time) {
  view.innerHTML = '' + time;
};

var decrement$ = function decrement$(start) {
  return Rx.Observable.merge(interval$.takeUntil(pause$).map(function (t) {
    return start - t;
  }), pause$.map(function (v) {
    return v;
  }));
};

start5$.switchMap(function (duration) {
  return decrement$(duration).takeWhile(function (val) {
    return val >= 0;
  });
}).subscribe(function (v) {
  return render(v);
}, function (err) {
  return console.log(err);
}, function () {
  return console.log('end');
});
</script>


<script id="jsbin-source-javascript" type="text/javascript">
const start5Bt = document.querySelector('.start5');
const pauseBt = document.querySelector('.pause');
const view = document.querySelector('.render');

const dec = (acc) => acc - 1
const pause = (val) => {
  return val.pause / 1000
}
const start = (val) => {
  return val.duration / 1000
}

const start5$ = Rx.Observable.fromEvent(start5Bt, 'click').map(() => 5)
const pause$ = Rx.Observable.fromEvent(pauseBt, 'click').map(() => 2)
const interval$ = Rx.Observable.interval(1000)

const render = (time) => {
  view.innerHTML = `${time}`
}

const decrement$ = (start) => Rx.Observable.merge(
  interval$.takeUntil(pause$).map(t => start - t),
  pause$.map(v => v)
)

start5$
  .switchMap(duration => decrement$(duration).takeWhile(val => val >= 0))
  .subscribe(
    v => render(v),
    err => console.log(err),
    () => console.log('end')
  )  </script></body>
</html>

## jsbin.kavomij.js
'use strict';

var start5Bt = document.querySelector('.start5');
var pauseBt = document.querySelector('.pause');
var view = document.querySelector('.render');

var dec = function dec(acc) {
  return acc - 1;
};
var pause = function pause(val) {
  return val.pause / 1000;
};
var start = function start(val) {
  return val.duration / 1000;
};

var start5$ = Rx.Observable.fromEvent(start5Bt, 'click').map(function () {
  return 5;
});
var pause$ = Rx.Observable.fromEvent(pauseBt, 'click').map(function () {
  return 2;
});
var interval$ = Rx.Observable.interval(1000);

var render = function render(time) {
  view.innerHTML = '' + time;
};

var decrement$ = function decrement$(start) {
  return Rx.Observable.merge(interval$.takeUntil(pause$).map(function (t) {
    return start - t;
  }), pause$.map(function (v) {
    return v;
  }));
};

start5$.switchMap(function (duration) {
  return decrement$(duration).takeWhile(function (val) {
    return val >= 0;
  });
}).subscribe(function (v) {
  return render(v);
}, function (err) {
  return console.log(err);
}, function () {
  return console.log('end');
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Pausable Timer</title>
	<script src="https://unpkg.com/@reactivex/rxjs@5.1.1/dist/global/Rx.js"></script>
	</head>
	<body>
	<button class="start5">start 5</button>
	<button class="reset">reset</button>
	<button class="pause">pause</button>
	<code class="render"></code>
	<script id="jsbin-javascript">
	'use strict';

	var start5Bt = document.querySelector('.start5');
	var pauseBt = document.querySelector('.pause');
	var view = document.querySelector('.render');

	var dec = function dec(acc) {
	return acc - 1;
	};
	var pause = function pause(val) {
	return val.pause / 1000;
	};
	var start = function start(val) {
	return val.duration / 1000;
	};

	var start5$ = Rx.Observable.fromEvent(start5Bt, 'click').map(function () {
	return 5;
	});
	var pause$ = Rx.Observable.fromEvent(pauseBt, 'click').map(function () {
	return 2;
	});
	var interval$ = Rx.Observable.interval(1000);

	var render = function render(time) {
	view.innerHTML = '' + time;
	};

	var decrement$ = function decrement$(start) {
	return Rx.Observable.merge(interval$.takeUntil(pause$).map(function (t) {
	return start - t;
	}), pause$.map(function (v) {
	return v;
	}));
	};

	start5$.switchMap(function (duration) {
	return decrement$(duration).takeWhile(function (val) {
	return val >= 0;
	});
	}).subscribe(function (v) {
	return render(v);
	}, function (err) {
	return console.log(err);
	}, function () {
	return console.log('end');
	});
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">
	const start5Bt = document.querySelector('.start5');
	const pauseBt = document.querySelector('.pause');
	const view = document.querySelector('.render');

	const dec = (acc) => acc - 1
	const pause = (val) => {
	return val.pause / 1000
	}
	const start = (val) => {
	return val.duration / 1000
	}

	const start5$ = Rx.Observable.fromEvent(start5Bt, 'click').map(() => 5)
	const pause$ = Rx.Observable.fromEvent(pauseBt, 'click').map(() => 2)
	const interval$ = Rx.Observable.interval(1000)

	const render = (time) => {
	view.innerHTML = `${time}`
	}

	const decrement$ = (start) => Rx.Observable.merge(
	interval$.takeUntil(pause$).map(t => start - t),
	pause$.map(v => v)
	)

	start5$
	.switchMap(duration => decrement$(duration).takeWhile(val => val >= 0))
	.subscribe(
	v => render(v),
	err => console.log(err),
	() => console.log('end')
	) </script></body>
	</html>