JSFiddle - React, Tailwind, and code Playground

by konijn_gmail_com

HTML

<body onload="cli.controller.init();">
        <textarea id="commandline" onkeydown="if (event.keyCode==13) cli_go(this);"></textarea>
</body>

CSS

body {
    background: #e5e5e5;
}

#commandline {
    position: absolute;
    left: 5%;
    top: 5%;
    height: 80%;
    width: 80%;
    padding: 2%;
    
    background: #333;
    color: #fefefe;
    
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

#commandline:focus {
    outline:none;
}

JavaScript

var cli = 
{
    view : 
    {
        element : null,
        focus   : function() { this.element.focus(); },
        update  : function() 
        {  
          element.value += ( ">>> " + cli.model.buffer.join("\n>>> ") )
        },
        init : function()
        {
            this.element = document.getElementById("commandline");
            this.focus();            
        },
        value : function(){ return this.element.value; }
    },
    model : 
    {
        buffer : [],
        clear : function(){ this.buffer.clear() }
    },
    controller : 
    {
        execute : function()
        {
          var command = cli.view.value().split("\n").pop();
          console.log( command );
        },
        init : function()
        {
            cli.view.init();
        }
    }
}

function cli_go(input) {
    cli.controller.execute();
    var lines = input.value;
    var lines_arr = lines.split(/\n+/);
    var cmd = lines_arr[lines_arr.length-1];
    
    cli_run(cmd);
    return false;
}

function cli_parse(cmd) {
    return cmd.split(/\s+/);
}

function cli_remove_blank_words(words) {
    
    while (words.length>0 && words[0]==="") {
        words = words.slice(1);    
    }
    while (words.length>0 && words[words.length-1]==="") {
        words = words.slice(0, words.length-1);    
    }
    
    return words;
}

function cli_run(cmd) {
    var words = cli_parse(cmd);
    words = cli_remove_blank_words(words);
    
    var last_word = null;
    
    for (var i=0; i<words.length; ++i) {
        var func_name = words.slice(0, i+1).join("_");
        if (window[func_name] === undefined) {
            break;   
        } else {
            last_word = i;
        }
    }
    
    if (last_word===null || words.length===0) {
        document.getElementById('commandline').value = document.getElementById('commandline').value + '\n>>> Command ' + words[0] + ' not found';
        return;
    }
    
    var func_name = words.slice(0, last_word+1).join( "_" );
 ...