JSFiddle - React, Tailwind, and code Playground

by speakman

HTML

<pre id="content">
</pre>

JavaScript

String.prototype.paddingLeft = function (paddingValue) {
   return String(paddingValue + this).slice(-paddingValue.length);
};


var c = document.getElementById('content');
var lastDate;

function insertText(k) {
    c.innerText += k + "\n";
};

function handleKeyEvent(k) {
    var ms = 0,
        newDate = new Date();

    if (lastDate)
       ms = newDate - lastDate;
    lastDate = newDate;
    
    insertText(ms.toString().paddingLeft("      ") + " " 
               + k.type.toString().paddingLeft("            ") + " " 
               + k.keyCode.toString().paddingLeft("      ") + " " 
               + String.fromCharCode(k.charCode).paddingLeft("   "));
    
    if (k.type === "keyup")
        insertText("");
};

window.addEventListener("keypress", handleKeyEvent, false);
window.addEventListener("keydown", handleKeyEvent, false);
window.addEventListener("keyup", handleKeyEvent, false);

insertText("Ready!");
insertText("");