JSFiddle - React, Tailwind, and code Playground

by bmarsh123

HTML

<form>
    <span>Type here: </span>
    <input type="text" id="input" />
    <div>
        <p class="placeholder"></p>
        <label class="keys">keyCode</label>
        <label class="keys">charCode</label>
        <label class="keys">which</label>
    </div>
    <div>
        <label class="left">Keydown: </label>
        <label class="keydownKeyCode prntscreen">--</label>
        <label class="keydownCharCode prntscreen">--</label>
        <label class="keydownWhich prntscreen">--</label>
    </div>
    <div class="topmar">
        <label class="left">Keypress: </label>
        <label class="keypressKeyCode prntscreen">--</label>
        <label class="keypressCharCode prntscreen">--</label>
        <label class="keypressWhich prntscreen">--</label>
    </div>
    <div class="topmar">
        <label class="left">Keyup: </label>
        <label class="keyupKeyCode">--</label>
        <label class="keyupCharCode prntscreen">--</label>
        <label class="keyupWhich">--</label>
    </div>
    <div class="topmar">
        <label class="left">Mouse Click: </label>
        <label class="mouseclick">--</label>
    </div>
    <div class="topmar">
        <label class="left">Mouse Move: </label>
        <label class="mousemove"></label>
    </div>
</form>

CSS

div { float: left; width: 100%; }
span { margin-left: 3%; }
input { margin: 15px 2px; }
label {
    float: left;
    width: 15%;
    text-align: center;
    margin-right: 5px;
}
.keys {
    border-bottom: 1px solid #000;
}
.placeholder {
    float: left;
    width: 15%;
    margin-right: 5px;
}
.left { float: left; margin-left: 10px; text-align: left; }
.mousemove { float: left; margin-left: 4%; text-align: left; }
.topmar { margin-top: 5px; }

JavaScript

$(function() {
    var keys = [
        { key: 'Backspace', code: '8' },
        { key: 'Tab', code: '9' },
        { key: 'Enter', code: '13' },
        { key: 'Shift', code: '16' },
        { key: 'Ctrl', code: '17' },
        { key: 'Alt', code: '18' },
        { key: 'Pause Break', code: '19' },
        { key: 'Caps Lock', code: '20' },
        { key: 'Esc', code: '27' },
        { key: 'Page Up', code: '33' },
        { key: 'Page Down', code: '34' },
        { key: 'End', code: '35' },
        { key: 'Home', code: '36' },
        { key: 'Left Arrow', code: '37' },
        { key: 'Up Arrow', code: '38' },
        { key: 'Right Arrow', code: '39' },
        { key: 'Down Arrow', code: '40' },
        //{ key: 'Print Screen', code: '44' },
        { key: 'Insert', code: '45' },
        { key: 'Delete', code: '46' },
        { key: 'Windows Key', code: '91' },
        { key: 'Context Menu', code: '93' },
        { key: 'F1', code: '112' },
        { key: 'F2', code: '113' },
        { key: 'F3', code: '114' },
        { key: 'F4', code: '115' },
        { key: 'F5', code: '116' },
        { key: 'F6', code: '117' },
        { key: 'F7', code: '118' },
        { key: 'F8', code: '119' },
        { key: 'F9', code: '120' },
        { key: 'F10', code: '121' },
        { key: 'F11', code: '122' },
        { key: 'F12', code: '123' },
        { key: 'Num Lock', code: '144' },
        { key: 'Scroll Lock', code: '145' }
    ];
    
    $('form').on('mousemove', function(e) {
        // Show current mouse position
        $('.mousemove').html('Top: ' + e.pageY + '<br/>Left: ' + e.pageX);
    }).on('contextmenu', function(e) {
        // Prevent context menu from displaying
        return false;
    });
    
    $('#input').on('keypress', function(e) {
        // Log the order in which this occurs
        console.log('keypress');
        if (e.charCode == '') {
            $('.keydownKeyCode').text('--');
        } else {
           ...