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>
<a href="#" id="input" class="off">Clicker</a>
<div id="output">
<h1>X</h1>
</div>

CSS

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

JavaScript

// model.js
var counter=0;
function Increment() { counter++; console.log(counter); }

// UI.js
var input1 = document.querySelector('#input');
var output1 = document.querySelector('#output');
var inputStream = Rx.Observable.fromEvent(input1, 'click');
var delayedStream = inputStream.debounce(()=>Rx.Observable.interval(500));

function Clicked(wasClicked) {
  if(wasClicked){ input1.className = 'on'; }
  else { input1.className = 'off'}
}

function UpdateValue() {
  output1.innerHTML = "<h1>"+counter+"</h1>";
}

inputStream.subscribe(Increment);
inputStream.subscribe(()=>Clicked(true));
delayedStream.subscribe(()=>Clicked(false));
delayedStream.subscribe(UpdateValue);