JSFiddle - React, Tailwind, and code Playground

by djwelsh

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="cont">
    <div id="btn"></div>
    <fieldset id="c"><legend>Countable</legend></fieldset>
    <fieldset id="uc"><legend>Uncountable</legend></fieldset>
</div>

CSS

#btn {
    position: absolute;
    top: 10px;
    left: 430px;
    width: 40px;
    height: 40px;
    background-color: green;
    
}
#cont {
    position: relative;
    width: 900px;
    height: 500px;
    background-color: whitesmoke;
    margin: 20px auto;
}
#c, #uc {
    padding: 0;
    display: block;
    position: absolute;
    width: 400px;
    height: 480px;
    border: 1px solid #333;
    top: 20px;
}
legend {
    font-family: arial, sans-serif;
    font-size: 1em;
    font-weight: bold;
    padding: 5px;
    display: block;
    text-align: center;
    color: white;
}
#c legend {
    background-color: orange;
}
#uc legend {
    background-color: blue;
}
#c { left: 20px; border-color: orange; }
#uc { right: 20px; border-color: blue; }
.word {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: white;
    border: 2px dashed #ccc;
    cursor: pointer;
    font-family: arial, sans-serif;
    font-size: 1.4em;
}

JavaScript

var words = [
    {c: 'dollar', uc: 'money'},
    {c: 'song', uc: 'music'},
    {c: 'suitcase', uc: 'luggage'},
    {c: 'chair', uc: 'furniture'},
    {c: 'battery', uc: 'electricity'},
    {c: 'bottle', uc: 'wine'},
    {c: 'report', uc: 'information'},
    {c: 'tip', uc: 'advice'},
    {c: 'journey', uc: 'travel'},
    {c: 'job', uc: 'work'},
    {c: 'view', uc: 'scenery'}
];

var cont = $('#cont');

$('#btn').click(function (event) {
    event.preventDefault();
    $('.word').each(function () {
        if ($(this).data('wordtype') == 'c') {
            $(this).css('border-color', 'orange');
        }
        else if ($(this).data('wordtype') == 'uc') {
            $(this).css('border-color', 'blue');
        }
    });
    
});

var coords = [];
for (var i = 0, k = 0; i < words.length; i++) {
    if (i % 6 == 0) k++;
    coords.push({
        position: 'absolute',
        top : Math.round(Math.random() * 5) + k * 60,
        left : 40 + (Math.round(Math.random() * 5) + (i % 6) * 140)
    });
    coords.push({
        position: 'absolute',
        top : Math.round(Math.random() * 5) + (k + 2) * 60,
        left : 40 + (Math.round(Math.random() * 5) + (i % 6) * 140)
    });
}
coords = shuffleArray(coords);

for (var i = 0; i < words.length; i++) {
    cont.append(
        $(document.createElement('div'))
            .addClass('word')
            .data('wordtype', 'c')
            .html(words[i].c)
            .draggable({
                containment : '#cont',
                cursor : 'pointer',
                opacity : 0.5
            })
//            .css(coords[i])
    );
    cont.append(
        $(document.createElement('div'))
            .addClass('word')
            .data('wordtype', 'uc')
            .html(words[i].uc)
            .draggable({
                containment : '#cont',
                cursor : 'pointer',
                opacity : 0.5
            })
//            .css(coords[i + words.length])
    );
}

$('.word').each(function (ind) {
   ...