JSFiddle - React, Tailwind, and code Playground

by Adambasszer

HTML

<h2><a id="canvasContainerAnchor">
        <table id="tableOfShapesColors" style="display:none" border="1">
            <tr>
                <td onclick="javascript:drawShapeIcon(16,null,'#ffffff')">szín1</td><td onclick="javascript:drawShapeIcon(16,null,'#111fff')">szín2</td><td onclick="javascript:drawShapeIcon(16,null,'#000000')">szín3</td><td onclick="javascript:drawShapeIcon(16,null,'#ff99cc')">szín4</td>
            </tr>
            <tr>
                <td onclick="javascript:drawShapeIcon(16,null,'#ffff00')">szín5</td><td onclick="javascript:drawShapeIcon(16,null,'#008080')">szín6</td><td onclick="javascript:drawShapeIcon(16,null,'#ff0000')">szín7</td><td onclick="javascript:drawShapeIcon(16,null,'#00ff00')">szín8</td>
            </tr>
            <tr>
                <td onclick="javascript:drawShapeIcon(16,1)">alak1</td><td onclick="javascript:drawShapeIcon(16,2)">alak2</td><td onclick="javascript:drawShapeIcon(16,3)">alak3</td><td onclick="javascript:drawShapeIcon(16,4)">alak4</td>
            </tr>
        </table>
        </a>hello<button id="OKButton" style="display:none" onclick="document.getElementById('tableOfShapesColors').style.display = 'none'; document.getElementById('ChooseButton').style.display = '';document.getElementById('OKButton').style.display = 'none';">
            OK
        </button>
        <button id="ChooseButton" onclick="document.getElementById('tableOfShapesColors').style.display = ''; document.getElementById('ChooseButton').style.display = 'none';document.getElementById('OKButton').style.display = '';">
            Choose
        </button></h2>

JavaScript

function findColorByName(colorName) {
    var colorsJSONObj = {
        "colors": [
            {
            "name": "white",
            "value": "#ffffff"},
        {
            "name": "blue",
            "value": "#111fff"},
        {
            "name": "black",
            "value": "#000000"},
        {
            "name": "pink",
            "value": "#ff99cc"},
        {
            "name": "yellow",
            "value": "#ffff00"},
        {
            "name": "darkgreen",
            "value": "#008080"},
        {
            "name": "red",
            "value": "#ff0000"},
        {
            "name": "green",
            "value": "#00ff00"}
        ]
    };
    for (var i = 0; i < colorsJSONObj.colors.length - 1; i++) {
        if (colorsJSONObj.colors[i].name == colorName) {
            return colorsJSONObj.colors[i].value;
        }
    }
}
alert(findColorByName("darkgreen"));

function drawShapeIcon(size, shape, color, node) {
    var canvasIcon, context, canvasContainerAnchor = document.getElementById('canvasContainerAnchor');
    if (shape) {
        canvasContainerAnchor.setAttribute('data-shape', shape);
    }
    if (color) {
        canvasContainerAnchor.setAttribute('data-color', color);
    }
    if (!canvasContainerAnchor.getAttribute('data-color')) {
        color = "#ffffff";
    } else {
        color = canvasContainerAnchor.getAttribute('data-color');
    }

    if (!canvasContainerAnchor.getAttribute('data-shape')) {
        shape = 1;
    } else {
        shape = Number(canvasContainerAnchor.getAttribute('data-shape'));
    }
    //if (!node) {
    if (!canvasContainerAnchor.getElementsByTagName('canvas')[0]) {
        canvasIcon = document.createElement('canvas');
        document.getElementById('canvasContainerAnchor').appendChild(canvasIcon);
        //set size
        canvasIcon.width = size;
        //size
        canvasIcon.height = size;
        //size
    } else {
        //canvasIcon = node;
        canvasIcon =...