JSFiddle - React, Tailwind, and code Playground

by roXon

HTML

<div id="container" class="cont">
    
    <div id="box1" class="box">
        <h1>HEADING!</h1>
        <p class="pClass1">Paragraph!</p>
        <a class="linkable" href="#">Some link...</a><br>
        <span>SPAN</span>
        <input type="text" value="input"/>
        <ul class="unorderedList">
            <li>List 1</li>
            <li>List 2</li>
            <li>List 3</li>
        </ul>
    </div>   
</div>

<div id="log" class="logscreen"></div>

CSS

body{
    background:#ccc;
    color:#4e4e4e;
    cursor:crosshair;
}
h1{
    font-size:20px;
}
#container{
    position:relative;
    background:#666;
    width:250px;
    padding:20px;
}

#box1{
    position:relative;
    padding:15px;
    background:#cf5;
    width:150px;
}



#log{
    font-size:12px;
    position:relative;
    font-weight:bold;
    margin:5px;
    padding:15px;
    color:#333;
}

JavaScript

$("body").click(function(event) { // if you are not interested on 'body' himself use: $("body>*")

    // QUESTIONS:
    var Q_qwer = 'Not a parent';
    var Q_children = 'Not a children';
    var Q_last = 'Not last';
    var Q_first = 'Not first';

    //#

    if ($(event.target).children().size() > 0) {
        myChildren = $(event.target).children();
        var Q_parent = myChildren[0].nodeName + ' (ID: ' + myChildren[0].id + ' || CLASS: ' + myChildren[0].className + ' )';
    }
    if ($(event.target).parent().size() > 0) {
        myParent = $(event.target).parent();
        var Q_children = myParent[0].nodeName + ' (ID: ' + myParent[0].id + ' || CLASS: ' + myParent[0].className + ' )';     
    }
    if ($(event.target).is(':last-child')) {
        Q_last = 'LAST!' ;      
    }
    if ($(event.target).is(':first-child')) { // or use: $(event.target).index() == 0
        Q_first = 'FIRST!' ;     
    }

    $("#log").html(' event.target: ' + event.target +
                   ' <br> nodeName: ' + event.target.nodeName +
                   ' , Tag: ' + event.target.tagName +
                   ' <br> ID: ' + event.target.id +
                   ' <br> Class: ' + event.target.className +
                   ' <br> Href: ' + event.target.href +
                   ' <br> Value: ' + event.target.value +
                   ' <br> Children of: ' + Q_children +
                   ' <br> Parent of: ' + Q_parent + ' (First children)' +
                   ' <br> Last children?: ' + Q_last +
                   ' <br> First children?: ' + Q_first +
                   ' <br> .index( ' + $(event.target).index() + ')' +
                   ' <br> .eq( ' + $(event.target).prevAll().length + ')' +
                   ' <br> <hr>' + $(event.target).html()

                  );
});