dtao/frp.example.js

## frp.example.js
window.addEventListener('load', function() {
  // This 'createWrapper' method is super weird and awkward and I'm not proud of
  // it at all. But right now it's the only option for defining custom sequence
  // types that wrap arbitrary sources. In a future version I will come up with
  // something much better, swear to God.
  var jqueryWrapper = Lazy.createWrapper(function(selector, eventName) {
    var source = this;
    $(selector).on(eventName, function(e) {
      source.emit(e);
    });
  });

  jqueryWrapper('#click-source', 'click')
    .map(function(e) { return [e.clientX, e.clientY]; })
    .each(function(pos) {
      $('#click-position').text('Clicked at ' + pos.join(', '));
    });
});

## index.html
<html>

<head>
    <title>Lazy.js FRP Example</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="https://rawgit.com/dtao/lazy.js/master/lazy.js"></script>
    <script src="https://rawgit.com/dtao/lazy.js/master/lazy.browser.js"></script>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="frp.example.js"></script>
</head>

<body>
    <div id="click-source">
        <p>Click anywhere in here.</p>
        <div id="click-position"></div>
    </div>
</body>

</html>

## style.css
html, body { height: 100% ;}

#click-source {
    position: relative;
    top: 50%;
    height: 400px;
    margin-top: -200px;
    background-color: #eee;
    cursor: pointer;
}

#click-source p {
    position: relative;
    top: 50%;
    margin-top: -12px;
    line-height: 24px;
    font-size: 20px;
    text-align: center;
}

#click-position {
    position: absolute;
    bottom: 10px;
    right: 10px;
}
	window.addEventListener('load', function() {
	// This 'createWrapper' method is super weird and awkward and I'm not proud of
	// it at all. But right now it's the only option for defining custom sequence
	// types that wrap arbitrary sources. In a future version I will come up with
	// something much better, swear to God.
	var jqueryWrapper = Lazy.createWrapper(function(selector, eventName) {
	var source = this;
	$(selector).on(eventName, function(e) {
	source.emit(e);
	});
	});

	jqueryWrapper('#click-source', 'click')
	.map(function(e) { return [e.clientX, e.clientY]; })
	.each(function(pos) {
	$('#click-position').text('Clicked at ' + pos.join(', '));
	});
	});
	<html>

	<head>
	<title>Lazy.js FRP Example</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script src="https://rawgit.com/dtao/lazy.js/master/lazy.js"></script>
	<script src="https://rawgit.com/dtao/lazy.js/master/lazy.browser.js"></script>
	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="frp.example.js"></script>
	</head>

	<body>
	<div id="click-source">
	<p>Click anywhere in here.</p>
	<div id="click-position"></div>
	</div>
	</body>

	</html>
	html, body { height: 100% ;}

	#click-source {
	position: relative;
	top: 50%;
	height: 400px;
	margin-top: -200px;
	background-color: #eee;
	cursor: pointer;
	}

	#click-source p {
	position: relative;
	top: 50%;
	margin-top: -12px;
	line-height: 24px;
	font-size: 20px;
	text-align: center;
	}

	#click-position {
	position: absolute;
	bottom: 10px;
	right: 10px;
	}