JSFiddle - React, Tailwind, and code Playground

by mmis1000

HTML

<div id='mainWrap'>
    <div id='output'>
        <div id='outputInner'>
            <div id='displayInput'></div>
            <div id='displayOutput'>
                <div>the generated command is:</div>
                <div id="commandText"></div>
            </div>
        </div>
    </div>
    <div id='input'>
        <div class='inputInnerleft'>
            <input type="text" id="x" class="posInput inputBox"></input>
            <input type="text" id="y" class="posInput inputBox"></input>
            <input type="text" id="z" class="posInput inputBox"></input>
            <input type="text" id="id" class="inputBox idMetaInput"></input>
            <input type="text" id="meta" class="inputBox idMetaInput"></input>
        </div>
        <div class='inputInnerMid'>
            <input type="text" id="nbtTag" class="inputBox nbtTagInput"></input>
        </div>
        <div class='inputInnerright'>
            <input type="button" id="generateCommand" class="leftButton" value="generate"></input>
            <input type="button" id="addBlock" class="leftButton" value="add"></input>
        </div>
    </div>
</div>

CSS

#mainWrap {
    width:100%;
    height:100%;
    top:0;
    left:0;
    position: absolute;
    background: gray;
}
#commandText {
    overflow:hidden;
}
#generatedCode {
    width:100%;
    height:100%;
    word-break: word;
    overflow-x:hidden;
    overflow-y:auto;
}
#input {
    height:24px;
    background:white;
    width:100%;
    position:absolute;
    bottom:0px;
}
.inputInnerMid {
    height:100%;
    width:100%;
    padding-left:205px;
    padding-right:190px;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
}
.inputInnerright {
    height:100%;
    width:190px;
    position:absolute;
    right:0;
    top:0;
}
.inputInnerleft {
    height:100%;
    width:220px;
    position:absolute;
    left:0;
    top:0;
}
#output {
    height:100%;
    width:100%;
    padding-bottom:25px;
    position:absolute;
    top:0px;
    overflow:auto;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
}
#outputInner {
    width:100%;
    height:100%;
    background:#777;
}
#displayInput {
    width:100%;
    height:70%;
    background:#777;
    overflow:auto;
}
#displayOutput {
    width:100%;
    height:30%;
    background:#999;
    overflow:auto;
}
/*for input area*/
 .posInput {
    width:40px;
    height:20px;
}
.idMetaInput {
    width:30px;
    height:20px;
}
.nbtTagInput {
    width:100%;
    height:20px;
}
.notEnabled {
    color:#CCCCCC;
}
.badFormat {
    color:red;
}
.inputBox {
    float:left;
    padding:0;
    border-width:1px;
    margin:1px;
}
.leftButton {
    float:right;
    width:80px;
    padding:0px;
    height:20px;
    border-width:1px;
    margin:1px;
}
/*for input area end*/
 .blockSet {
    width:100%;
    height:30px;
    background:#aaa;
    float:right;
   ...

JavaScript

var CommandList = {};
var inputBoxDisplayDefault = {
    x: "X",
    y: "Y",
    z: "Z",
    id: "id",
    meta: "meta",
    nbtTag: "NbtTag"
};
var isInputBoxEnabled = {
    x: false,
    y: false,
    z: false,
    id: false,
    meta: false,
    nbtTag: false
};
var inputBoxDefault = {
    x: "0",
    y: "0",
    z: "0",
    id: "0",
    meta: "0",
    nbtTag: ""
};
var inputBoxForce = {
    x: true,
    y: true,
    z: true,
    id: true,
    meta: false,
    nbtTag: false
};

var inputBoxFormat = {
    x: /(~?-?\d+|~)/g,
    y: /(~?-?\d+|~)/g,
    z: /(~?-?\d+|~)/g,
    id: /[\w:]+/g,
    meta: /\d+/g,
    nbtTag: /.+/g
};

function inputBoxCheck(element) {
    if (element.value === "") {
        inputBoxDisable(element);
    }
}

function inputBoxEnable(element) {
    $(element)
        .removeClass("notEnabled")
        .val("");
    isInputBoxEnabled[element.id] = true;
}

function inputBoxDisable(element) {
    $(element)
        .addClass("notEnabled")
        .val(inputBoxDisplayDefault[element.id]);
    isInputBoxEnabled[element.id] = false;
}

function inputBoxOnSelect(element) {
    if (!isInputBoxEnabled[element.id]) {
        inputBoxEnable(element);
    }
    $(element).removeClass("badFormat");
}

function inputBoxOnBlur(element) {
    if ($(element).val() === "") {
        inputBoxDisable(element);
    }
}

function inputBoxOnkeyPress(event) {
    $(this).removeClass("badFormat");
    var keynum;
    if (window.event) {
        keynum = event.keyCode;
    } else if (event.which) {
        keynum = event.which;
    } else {
        keynum = 0;
    }
    if (keynum == 13) {
        if (finalCheck()) {
            appendCommandList(getCurrentInput());
            resetInput();
            $("#x").focus();
        }
    }
    return true;
}

var initInputBox = function initInputBox() {
    $(".inputBox")
        .addClass("notEnabled")
        .val(inputBoxDisplayDefault.x)
        .focus(function () {
        inputBoxOnSelect(this);
    })
       ...