JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

HTML

<textarea placeholder="html code" id="input">
    <div id="pTaskEditor" class="component page">
        <div class="box">
            <input id="pTaskEditorNameInput">
            <input id="pTaskEditorDescriptionInput">
        </div>
        <div class="box">
            <div id="pTaskEditorArgListNode">
                <div class="item"><span class="input name">name</span><span class="input type">type</span><span class="input value">default value</span><span class="input description">description</span></div>
                <div id="pTaskEditorArgListBody"></div>
            </div>
        </div>
        <div class="box">
            <div id="pTaskEditorAddArgButton"></div>
        </div>
        <div class="box ide">
            <div class="label">
                <div>Source code</div>
                <div id="pTaskEditorAddFullScreen" class="link">fullscreen</div>
                <div id="pTaskEditorAddEvents" class="link">events
                    <div id="pTaskEditorAddEventList"></div>
                </div>
                <div id="pTaskEditorAddDone" class="link">done
                    <div id="pTaskEditorAddDoneList"></div>
                </div>
                <div id="pTaskEditorAddOutput" class="link">output</div>
                <div id="pTaskEditorAddTitle" class="link">title</div>
                <div id="pTaskEditorIde" class="editor"></div>
            </div>
            <div class="label">Etalon
                <textarea id="pTaskEditorEtalon" placeholder="task etalon" />
            </div>
            <div id="pTaskEditorIdeDropDownList"></div>
        </div>
        <div class="box">
            <div id="pTaskEditorSaveButton"></div>
        </div>
    </div>
</textarea>
<button id="runner">Convert it!</button>
<textarea placeholder="js code" id="output"></textarea>

CSS

textarea {
    width: 100%;
    height: 200px;
    resize: vertical;
    float: left;
}

button {
    width: 100%;
    font-size: 24px;
    height: 50px;
    line-height: 50px;
    float: left;
    text-align: center;
}

JavaScript

(function() {
    var runner = document.getElementById('runner'),
        input = document.getElementById('input'),
        output = document.getElementById('output'),
        testNode = document.getElementById('test');

    runner.addEventListener('click', function() {
        var html = input.value,
            $node = document.createElement('div'),
            level = 0,
            code = '';

        $node.innerHTML = html;



        function tree(node) {
            code += 'var node' + level + ' = document.createElement(\'' + node.nodeName + '\');\n';
            var r = {
                    tag: node.nodeName
                }, decrease = 0,
                a, i;
            for (i = 0; a = node.attributes[i]; i++) {
                r[a.nodeName] = a.nodeValue;
                code += 'node' + level + '[\'' + a.nodeName + '\'] = \'' + a.nodeValue + '\';\n';
            }
            if ( level > 0 ) {
            	code += 'node' + (level - 1) + '.appendChild(' + 'node' + level + ');\n';
            }
            ++level;
            if (node.childElementCount) {
                r.children = [];
                for (i = 0; a = node.children[i]; i++) {
                    r.children.push(tree(a));
                    ++decrease;
                }
            }
            level -= decrease;
            return r;
        }

        tree($node);
        console.clear();
        console.log(code);
    });
})()