JSFiddle - React, Tailwind, and code Playground

by Gabriel Esquivel

HTML

<body>

<p id="el1">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

<ul id="el2">
   <li id="el3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li id="el4">Aliquam tincidunt mauris eu risus.</li>
   <li id="el5">Vestibulum auctor dapibus neque.</li>
</ul>
           

</body>

CSS

p{
    padding:10px;
    border: 1px dotted red;
}

body *{
    cursor:pointer;
}

li{
     padding:5px;
    border: 1px dotted green;
}

li{
     padding:5px;
    border: 1px dotted green;
}

JavaScript

$(document).ready(function() {

    var elementTag;
    var divID;

    $("#modalPicker").dialog({
        show: "blind",
        hide: "explode",
        height: 299,
        width: 247,
        modal: true,
        autoOpen: false,
        open: function() {
            $('#picker').farbtastic(function(color) {
                $("#" + divID).css("background-color", color);
            });
        }

    });

    $("body *").click(function(event) {

        event.preventDefault();
        event.stopPropagation();

        var elementTag = event.target.nodeName;
        var elementId = event.target.id;
   
        
        console.log(elementTag, elementId );
        
        if (typeof elementId != 'undefined') {
            divID = elementId;
            $(this).removeClass();
            $("#modalPicker").dialog("open");
        }
        else if ($("" + elementTag).attr('id') == undefined) {
            alert("no ID for this element!");
        }
    });


});