JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<html>
<head>
    <script type="text/javascript" src="/portfolio/scripts/jquery-1.7.2.min.js"></script>
</head>
<body style="margin: 0;">

<div id="keysConsole" style="font-size: 9pt; font-family: Arial, Helvetica, sans-serif"></div>

</body>
</html>

JavaScript

var KeyListener = new KeyListener();
function KeyListener(){
    this.keysStatus = Array();
    
    //Constructor
    $(document).keydown(
        function(e){
            e.preventDefault();
            KeyListener.onKeyDown(e);
        }
    );
    $(document).keyup(
        function(e){
            e.preventDefault();
            KeyListener.onKeyUp(e);
        }
    );
    
    this.onKeyDown = function(e){
        var keyCode = e.keyCode;
        if(this.keysStatus[keyCode]){
            consoleOutput('Key ['+keyCode+'] Hold <br/>');
        } else {
            this.keysStatus[keyCode] = new Date();
            consoleOutput('Key ['+keyCode+'] Down <br/>');
            this.detectCombinations();
        }
    }
    
    this.onKeyUp = function(e){
        var keyCode = e.keyCode;
        var keyDownDate = this.keysStatus[keyCode];
        var keyUpDate = new Date();
        var keyHoldTime = keyUpDate-keyDownDate;
        this.keysStatus[keyCode] = false;
        
        consoleOutput('Key ['+keyCode+'] Up after '+keyHoldTime+' milliseconds <br/>');
    }
    
    this.detectCombinations = function(){
        if(this.keysStatus[17] && this.keysStatus[66]){
            consoleOutput('Combination CTRL+B detected <br/>');
        }
    }
}


function consoleOutput(text){
    $('#keysConsole').append(text);
    //console.log('Height: ['+$('#keysConsole').height()+'] Top: ['+$('#keysConsole').scrollTop()+']');
    $(document).scrollTop($(document).height());
}