JSFiddle - React, Tailwind, and code Playground

by timdream

HTML

<form id="form" action="#" method="get">
  <input id="text" type="text" />
</form>
<div>
</div>

CSS

body {
    font-family: monospace;
}

input {
    font-size: 200%
}

JavaScript

$(function () {
    var timer;
    
    var $div = $('div');
    
    window.log = function log(text) {
        $div.prepend(
            $('<p />').text(Date.now() + ': ' + text)
        );
        clearTimeout(timer);
        timer = setTimeout(function () {
            $div.prepend($('<hr />'));
            cleanUp();
        }, 500);
    }
});

var el = document.getElementById('text');

var cleanUp = function cleanUp() {
    el.removeEventListener('keyup', keydownListenerLog);
    el.removeEventListener('keypress', keydownListenerLog);
    el.removeEventListener('keyup', keydownSetTimeoutLog);
    el.removeEventListener('keypress', keydownSetTimeoutLog);
    el.removeEventListener('keyup', keydownSetImmediateLog);
    el.removeEventListener('keypress', keydownSetImmediateLog);

    el.removeEventListener('keyup', keypressListenerLog);
    el.removeEventListener('keyup', keypressSetTimeoutLog);
    el.removeEventListener('keyup', keypressSetImmediateLog);
};

var keydownListenerLog = function keydownListenerLog(evt) {
    window.log(evt.type + ' bind at keydown');
    el.removeEventListener(evt.type, keydownListenerLog);
};

var keydownSetTimeoutLog = function keydownSetTimeoutLog(evt) {
    window.log(evt.type + ' bind at keydown aft setTimeout');
    el.removeEventListener(evt.type, keydownSetTimeoutLog);
};

var keydownSetImmediateLog = function keydownSetImmediateLog(evt) {
    window.log(evt.type + ' bind at keydown aft setImmediate');
    el.removeEventListener(evt.type, keydownSetImmediateLog);
};

var keypressListenerLog = function keypressListenerLog(evt) {
    window.log(evt.type + ' bind at keypress');
    el.removeEventListener(evt.type, keypressListenerLog);
};

var keypressSetTimeoutLog = function keypressSetTimeoutLog(evt) {
    window.log(evt.type + ' bind at keypress aft setTimeout');
    el.removeEventListener(evt.type, keypressSetTimeoutLog);
};

var keypressSetImmediateLog = function keypressSetImmediateLog(evt) {
    window.log(evt.type +...