JSFiddle - React, Tailwind, and code Playground

by dafastestfingers

HTML

<div id="menu-editor">
    <div id="menu-editor-toolbar">
        <ul id="menu-editor-buttons">
            <li id="add-menu" class="menu-editor-button">
                ADD MENU
            </li>
            <li id="add-item" class="menu-editor-button">
                ADD ITEM
            </li>
            <li id="delete-item" class="menu-editor-button">
                DELETE ITEM
            </li>
        </ul>
    </div>
    <div id="menu-editor-canvas">
    </div>
    <div id="menu-editor-output">
    </div>
</div>

CSS

div#menu-editor {
    border: solid 1px black;
    height: 300px;
    width: 450px
}

div#menu-editor-toolbar {
    border-bottom: solid 1px black;
    font-family: courier;
    height: 20px;
    width: 100%;
}

div#menu-editor-canvas {
    border-bottom: solid 1px black;
    height: 180px;
    width: 100%;
}

div#menu-editor-output {
    background: #ddd;
    height: 99px;
    width: 100%;
}

li.menu-editor-button {
    cursor: pointer;
    display: inline;
    padding: 2px 5px 2px 5px;
}

JavaScript

var debug = true;
var dAlert = function(arg) {
    if (debug) { alert(arg); }
}

var options = {
    elementIdentity: {
        containerId: 'menu-editor',
        toolbarId: 'menu-editor-toolbar',
        buttonClass: 'menu-editor-button',
        addMenuButtonId: 'add-menu',
        addItemButtonId: 'add-item',
        deleteItemButtonId: 'delete-item',
        canvasId: 'menu-editor-canvas',
        outputId: 'menu-editor-output
    }
    elementStyle: {
        container: {
            'border': 'solid 1px black',
            'height': '300px',
            'width': '450px',
        }
        toolbar: {
            'border-bottom': 'solid 1px black',
            'font-family': 'courier',
            'height': '20px',
            'width': '100%'
        }
        button: {
            'cursor': 'pointer',
            'display': 'inline',
            'padding': '2px 5px 2px 5px'
        },
        addMenuButton: {},
        addItemButton: {},
        deleteItemButton: {}.
        canvasId: {
            'border-bottom': 'solid 1px black',
            'height': '180px',
            'width': '100%'
        },
        outputId: {
            'background': '#ddd',
            'height': '99px'
            'width': '100%'
        }
    }
}
    
// render

// buttons
$('.menu-editor-button').click(function(){
    var button = $(this).attr('id'); dAlert(button);
    switch (button) {
        case "add-menu":
            break;
        case "add-item":
            break;
        case "delete-item":
            break;
        default:
            dAlert("unknown button id="+button)
            break
    }
});