JSFiddle - React, Tailwind, and code Playground

by beneverard

HTML

<p class="name">Swipe your card</p>

CSS

body, html {
    height: 100%;
    width: 100%; 
    font-size: 40px;
    font-family: sans-serif;
}

p {
    padding: 50px;
    text-align: center;  
}

JavaScript

String.prototype.replaceAt = function(index, char) {
    
    var len = char.length;
    
    // if we're replacing with an empty string, we
    // actually want the length to be 1
    
    if (char == '')
    {
         len = 1;
    }
    
    return this.substr(0, index) + char + this.substr(index + len);
    
}
    
function process_code(input) {
    
    // set various vars
    var str = input,
        number = str.substr(0, 3),
        name = str.substr(3),
        index = name.indexOf('0');
    
    // convert 0 to spaces
    while (index != -1) {
        name = name.replaceAt(index, " ");
        index = name.indexOf('0');
    }
    
    index = name.indexOf('1');
    name = name.replaceAt(0, name.substr(0,1).toUpperCase());
    
    // convert 1 to upper case
    while (index != -1) {
     
        name = name.replaceAt(index, "");
        name = name.replaceAt(index, name.substr(index,1).toUpperCase());
        
        index = name.indexOf('1');
        
    }
    
    // output the number and name to screen
    $('.name').html(number + ', ' + name);
    
}

$(document).ready(function() {

    var input = '';
    
    $('body').keyup(function(event) {
        
        // listen for keyup
        if (event.keyCode === 13) {
            
             // if return is hit, start process
             process_code(input.toLowerCase());
             input = '';
            
        } else {
            // anything else, append to input var
            input = input + String.fromCharCode(event.keyCode);
        }
        
    });
    
});