JSFiddle - React, Tailwind, and code Playground

by karin

HTML

<div id='Out' class="out">out</div>
<div id="Container" class="test"></div>
<script src="jquery-ui-1.11.0/jquery-ui.min.js"></script>

CSS

#Container {
    max-width:100%;
    height:100%;
    padding:3em;
    /*background-color:rgba(0,0,0,0.9);*/
    background:#ddd;
}
.out {
    background:yellow;
}
.sqr {
    background:yellow;
    text-align:center;
    padding:0.5em;
    font-weight:bold;
    font-size:1.5em;
    width:1em;
    height:1em;
    margin:0.3em;
    cursor:pointer;
    -moz-border-radius: 150px;
    -webkit-border-radius: 150px;
    border-radius: 150px;
    /* future proofing */
    -khtml-border-radius: 150px;
    /* for old Konqueror browsers */
}

JavaScript

function addBubble() {
    for (var i = 0; i < 5; i++) {
        var container = document.getElementById("Container");
        var div = document.createElement("div");
        div.className = "sqr";
        div.setAttribute("id", 'myDiv' + [i]);
        container.appendChild(div);
    }
}

function getId(e) {
    var target = e.target;
    var thisId = target.getAttribute('id');
    document.getElementById('Out').innerHTML = thisId;
}



window.addEventListener('load', addBubble, false);
window.addEventListener('mouseover', getId, true);