lmeyerov/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Flapjax stopwatch demo</title>
    <link rel="stylesheet" href="styles.css"/>
    <script type="text/javascript" src="https://www.flapjax-lang.org/download/flapjax-2.1.js"></script>
    <script type="text/javascript">

        //Written in the React style with Flapjax as the only dependency
        class Stopwatch {

            // {resetsE: EventStream<ClickEvent> -> ()
            constructor ({resetsE}) {

                //Behavior<number>
                const nowB = timerB(50);

                this.state = {

                    //Behavior<number>
                    stopwatchTimeB:
                        nowB.liftB(
                            (lastClicked, now) => (now - lastClicked),
                            resetsE
                                .snapshotE(nowB)
                                .startsWith(nowB.valueNow()))
                };
            }

            // () -> Behavior<DOM>
            render() {

                //Behavior<DOM>
                const labelB =
                    this.state.stopwatchTimeB
                        .liftB((time) => `Elapsed: ${Math.round(time/1000)}s`)

                //Behavior<DOM>
                return DIV(H3({className: 'stopwatch'}, labelB));
            }
        };


        function wire() {

            // Behavior<DOM>
            const myComponentB =
                DIV(H1('Flapjax Demo'),
                    (new Stopwatch({resetsE: $E('resetBtn','click')})).render());

            insertDomB(myComponentB, "myComponent");

        }
    </script>
</head>
<body onload="wire();">
    <div><div id="myComponent"/></div>
    <input id="resetBtn" type="button" value="Reset"/>
</body>
</html>

## script.js
console.log('Hello World!');

## styles.css
        input, .stopwatch {
          padding: 0.5em;
        }
        .stopwatch {
          color: #f30;
          background: white;
          border: 2px solid #f30;
          display: inline-block;
        }
        input {
          text-transform: uppercase;
          font-weight: bold;
          background: #FFF;
          color: #000;
          border: 2px solid black;
        }
	<!DOCTYPE html>
	<html>
	<head>
	<title>Flapjax stopwatch demo</title>
	<link rel="stylesheet" href="styles.css"/>
	<script type="text/javascript" src="https://www.flapjax-lang.org/download/flapjax-2.1.js"></script>
	<script type="text/javascript">

	//Written in the React style with Flapjax as the only dependency
	class Stopwatch {

	// {resetsE: EventStream<ClickEvent> -> ()
	constructor ({resetsE}) {

	//Behavior<number>
	const nowB = timerB(50);

	this.state = {

	//Behavior<number>
	stopwatchTimeB:
	nowB.liftB(
	(lastClicked, now) => (now - lastClicked),
	resetsE
	.snapshotE(nowB)
	.startsWith(nowB.valueNow()))
	};
	}

	// () -> Behavior<DOM>
	render() {

	//Behavior<DOM>
	const labelB =
	this.state.stopwatchTimeB
	.liftB((time) => `Elapsed: ${Math.round(time/1000)}s`)

	//Behavior<DOM>
	return DIV(H3({className: 'stopwatch'}, labelB));
	}
	};


	function wire() {

	// Behavior<DOM>
	const myComponentB =
	DIV(H1('Flapjax Demo'),
	(new Stopwatch({resetsE: $E('resetBtn','click')})).render());

	insertDomB(myComponentB, "myComponent");

	}
	</script>
	</head>
	<body onload="wire();">
	<div><div id="myComponent"/></div>
	<input id="resetBtn" type="button" value="Reset"/>
	</body>
	</html>
	input, .stopwatch {
	padding: 0.5em;
	}
	.stopwatch {
	color: #f30;
	background: white;
	border: 2px solid #f30;
	display: inline-block;
	}
	input {
	text-transform: uppercase;
	font-weight: bold;
	background: #FFF;
	color: #000;
	border: 2px solid black;
	}