zacacollier/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
#app {
	margin: 0 auto;
	width: 13.37%;
	background-color: gainsboro;
	color: #222;
	text-align: center;
	height: 5vw;
	line-height: 5vw;
	border-radius: 3vw;
	font: 4vw monospace;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script>
<div id="app">
	</div>
<script id="jsbin-javascript">
function DOMDriver(text$) {
	text$.subscribe(text => {
		const container = document.querySelector('#app');
		container.textContent = text;
	});
	const DOMSource = Rx.Observable.fromEvent(document, 'click');
	return DOMSource;
}
function main (DOMSource) {
	const click$ = DOMSource;
	const sinks = {
		DOM: click$
			.flatMapLatest(() => Rx.Observable
				.timer(0, 1000)
				.map(t => `0${secToMin.displayMin(t)}:${secToMin.displaySec(t)}`)
		),
		log: Rx.Observable.timer(0, 1000)
			.map(t => t)
	}
	return sinks
}
const convertMin = (sec) => (sec - sec % 60) / 60;
const convertSec = (sec) => (sec % 60);
const secToMin = ({
	displayMin: (sec) => convertMin(sec) > 0 ? convertMin(sec) : '',
	displaySec: (sec) => `${convertSec(sec)}`.length <= 1 ? `0${convertSec(sec)}` : convertSec(sec)
})


function consoleLogDriver (msg$) {
	msg$.subscribe(msg => console.log(msg));
}

const drivers = {
	DOM: DOMDriver,
	log: consoleLogDriver,
}

function run (mainFn, effects) {
	const proxyDOMSource = new Rx.Subject();
	const sinks = mainFn(proxyDOMSource);
	const DOMSource = drivers.DOM(sinks.DOM)
	DOMSource.subscribe(click => proxyDOMSource.onNext(click))
	Object.keys(effects).forEach(key => {
		effects[key](sinks[key]);
	});
}

run(main, drivers)
</script>


<script id="jsbin-source-css" type="text/css">#app {
	margin: 0 auto;
	width: 13.37%;
	background-color: gainsboro;
	color: #222;
	text-align: center;
	height: 5vw;
	line-height: 5vw;
	border-radius: 3vw;
	font: 4vw monospace;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">function DOMDriver(text$) {
	text$.subscribe(text => {
		const container = document.querySelector('#app');
		container.textContent = text;
	});
	const DOMSource = Rx.Observable.fromEvent(document, 'click');
	return DOMSource;
}
function main (DOMSource) {
	const click$ = DOMSource;
	const sinks = {
		DOM: click$
			.flatMapLatest(() => Rx.Observable
				.timer(0, 1000)
				.map(t => `0${secToMin.displayMin(t)}:${secToMin.displaySec(t)}`)
		),
		log: Rx.Observable.timer(0, 1000)
			.map(t => t)
	}
	return sinks
}
const convertMin = (sec) => (sec - sec % 60) / 60;
const convertSec = (sec) => (sec % 60);
const secToMin = ({
	displayMin: (sec) => convertMin(sec) > 0 ? convertMin(sec) : '',
	displaySec: (sec) => `${convertSec(sec)}`.length <= 1 ? `0${convertSec(sec)}` : convertSec(sec)
})


function consoleLogDriver (msg$) {
	msg$.subscribe(msg => console.log(msg));
}

const drivers = {
	DOM: DOMDriver,
	log: consoleLogDriver,
}

function run (mainFn, effects) {
	const proxyDOMSource = new Rx.Subject();
	const sinks = mainFn(proxyDOMSource);
	const DOMSource = drivers.DOM(sinks.DOM)
	DOMSource.subscribe(click => proxyDOMSource.onNext(click))
	Object.keys(effects).forEach(key => {
		effects[key](sinks[key]);
	});
}

run(main, drivers)</script></body>
</html>

## jsbin.yuyumaw.css
#app {
	margin: 0 auto;
	width: 13.37%;
	background-color: gainsboro;
	color: #222;
	text-align: center;
	height: 5vw;
	line-height: 5vw;
	border-radius: 3vw;
	font: 4vw monospace;
}

## jsbin.yuyumaw.js
function DOMDriver(text$) {
	text$.subscribe(text => {
		const container = document.querySelector('#app');
		container.textContent = text;
	});
	const DOMSource = Rx.Observable.fromEvent(document, 'click');
	return DOMSource;
}
function main (DOMSource) {
	const click$ = DOMSource;
	const sinks = {
		DOM: click$
			.flatMapLatest(() => Rx.Observable
				.timer(0, 1000)
				.map(t => `0${secToMin.displayMin(t)}:${secToMin.displaySec(t)}`)
		),
		log: Rx.Observable.timer(0, 1000)
			.map(t => t)
	}
	return sinks
}
const convertMin = (sec) => (sec - sec % 60) / 60;
const convertSec = (sec) => (sec % 60);
const secToMin = ({
	displayMin: (sec) => convertMin(sec) > 0 ? convertMin(sec) : '',
	displaySec: (sec) => `${convertSec(sec)}`.length <= 1 ? `0${convertSec(sec)}` : convertSec(sec)
})


function consoleLogDriver (msg$) {
	msg$.subscribe(msg => console.log(msg));
}

const drivers = {
	DOM: DOMDriver,
	log: consoleLogDriver,
}

function run (mainFn, effects) {
	const proxyDOMSource = new Rx.Subject();
	const sinks = mainFn(proxyDOMSource);
	const DOMSource = drivers.DOM(sinks.DOM)
	DOMSource.subscribe(click => proxyDOMSource.onNext(click))
	Object.keys(effects).forEach(key => {
		effects[key](sinks[key]);
	});
}

run(main, drivers)
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	#app {
	margin: 0 auto;
	width: 13.37%;
	background-color: gainsboro;
	color: #222;
	text-align: center;
	height: 5vw;
	line-height: 5vw;
	border-radius: 3vw;
	font: 4vw monospace;
	}
	</style>
	</head>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script>
	<div id="app">
	</div>
	<script id="jsbin-javascript">
	function DOMDriver(text$) {
	text$.subscribe(text => {
	const container = document.querySelector('#app');
	container.textContent = text;
	});
	const DOMSource = Rx.Observable.fromEvent(document, 'click');
	return DOMSource;
	}
	function main (DOMSource) {
	const click$ = DOMSource;
	const sinks = {
	DOM: click$
	.flatMapLatest(() => Rx.Observable
	.timer(0, 1000)
	.map(t => `0${secToMin.displayMin(t)}:${secToMin.displaySec(t)}`)
	),
	log: Rx.Observable.timer(0, 1000)
	.map(t => t)
	}
	return sinks
	}
	const convertMin = (sec) => (sec - sec % 60) / 60;
	const convertSec = (sec) => (sec % 60);
	const secToMin = ({
	displayMin: (sec) => convertMin(sec) > 0 ? convertMin(sec) : '',
	displaySec: (sec) => `${convertSec(sec)}`.length <= 1 ? `0${convertSec(sec)}` : convertSec(sec)
	})


	function consoleLogDriver (msg$) {
	msg$.subscribe(msg => console.log(msg));
	}

	const drivers = {
	DOM: DOMDriver,
	log: consoleLogDriver,
	}

	function run (mainFn, effects) {
	const proxyDOMSource = new Rx.Subject();
	const sinks = mainFn(proxyDOMSource);
	const DOMSource = drivers.DOM(sinks.DOM)
	DOMSource.subscribe(click => proxyDOMSource.onNext(click))
	Object.keys(effects).forEach(key => {
	effects[key](sinks[key]);
	});
	}

	run(main, drivers)
	</script>


	<script id="jsbin-source-css" type="text/css">#app {
	margin: 0 auto;
	width: 13.37%;
	background-color: gainsboro;
	color: #222;
	text-align: center;
	height: 5vw;
	line-height: 5vw;
	border-radius: 3vw;
	font: 4vw monospace;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">function DOMDriver(text$) {
	text$.subscribe(text => {
	const container = document.querySelector('#app');
	container.textContent = text;
	});
	const DOMSource = Rx.Observable.fromEvent(document, 'click');
	return DOMSource;
	}
	function main (DOMSource) {
	const click$ = DOMSource;
	const sinks = {
	DOM: click$
	.flatMapLatest(() => Rx.Observable
	.timer(0, 1000)
	.map(t => `0${secToMin.displayMin(t)}:${secToMin.displaySec(t)}`)
	),
	log: Rx.Observable.timer(0, 1000)
	.map(t => t)
	}
	return sinks
	}
	const convertMin = (sec) => (sec - sec % 60) / 60;
	const convertSec = (sec) => (sec % 60);
	const secToMin = ({
	displayMin: (sec) => convertMin(sec) > 0 ? convertMin(sec) : '',
	displaySec: (sec) => `${convertSec(sec)}`.length <= 1 ? `0${convertSec(sec)}` : convertSec(sec)
	})


	function consoleLogDriver (msg$) {
	msg$.subscribe(msg => console.log(msg));
	}

	const drivers = {
	DOM: DOMDriver,
	log: consoleLogDriver,
	}

	function run (mainFn, effects) {
	const proxyDOMSource = new Rx.Subject();
	const sinks = mainFn(proxyDOMSource);
	const DOMSource = drivers.DOM(sinks.DOM)
	DOMSource.subscribe(click => proxyDOMSource.onNext(click))
	Object.keys(effects).forEach(key => {
	effects[key](sinks[key]);
	});
	}

	run(main, drivers)</script></body>
	</html>