JSFiddle - React, Tailwind, and code Playground

by jirve

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.8/Rx.min.js"></script>
<div>
<a href="#" id="input1"> Inputs </a>
<div id="out" class="off">
<h1>
X
</h1>
</div>
</div>

CSS

.on { background: green; }
.off { background: red; }

JavaScript

// logic

var counter = 0;

function AddToCounter() {
	counter++;
}


// UI

var input1 = document.querySelector("#input1");
var output1 = document.querySelector("#out");

var inputStream = Rx.Observable.fromEvent(input1, "click");
var delayedInputStream = inputStream.debounce(() => Rx.Observable.interval(500));

function turnOn() {
	output1.className = 'on';
}

function turnOff() {
	output1.className = 'off';
}

console.log(output1);

inputStream.subscribe( AddToCounter );
inputStream.subscribe( turnOn );
delayedInputStream.subscribe( () => turnOff() );
delayedInputStream.subscribe( () => output1.innerHTML = "<h1>"+counter+"</h1>");