JSFiddle - React, Tailwind, and code Playground

by mattpodwysocki

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.3/rx.compat.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.3/rx.binding.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.3/rx.async.compat.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.3/rx.aggregates.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.3/rx.joinpatterns.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.3/rx.coincidence.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.3/rx.experimental.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.3/rx.time.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.3/rx.virtualtime.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.3/rx.testing.js"></script>
<ul id="results"></ul>

JavaScript

var mousemoves = Rx.Observable
    .fromEvent(document, 'mousemove');

var deltas = mousemoves.zip(mousemoves.skip(1), function (l, r) {
    return { x: r.clientX - l.clientX, y: r.clientY - l.clientY }; 
}).bufferWithTime(500);

var results = document.getElementById('results');

var subscription = 
    deltas.subscribe(function (delta) {
        
        results.innerHTML = '';
        
        delta.forEach(function (d) {
            var li = document.createElement('li');
            li.innerHTML = '['+d.x+','+d.y+']';
            results.appendChild(li);
        });
        
    });