JSFiddle - React, Tailwind, and code Playground

by yinyann

HTML

<input id="add" type="button" value="test" />
<div id="current">
    
</div>
<div id="history">
    
</div>
<div id="contents" style="visibility:hidden">
    <span class="square">1</span>
    <span class="square">2</span>
    <span class="square">3</span>    
    <span class="square">4</span>    
    <span class="square">5</span>    
    <span class="square">6</span>    
    <span class="square">7</span>    
    <span class="square">8</span>    
    <span class="square">9</span>    
    <span class="square">10</span>    
    <span class="square">11</span>    
    <span class="square">11</span>    
    <span class="square">12</span>    
    <span class="square">12</span>    
    <span class="square">13</span>    
    <span class="square">13</span>    
    <span class="square">14</span>    
    <span class="square">14</span>    
    <span class="square">15</span>    
    <span class="square">15</span>    
    <span class="square">16</span>    
    <span class="square">16</span>    
    <span class="square">17</span>    
    <span class="square">17</span>    
    <span class="square">18</span>    
    <span class="square">18</span>    
    <span class="square">19</span>    
    <span class="square">19</span>    
    <span class="square">20</span>    
    <span class="square">21</span>    
    <span class="square">22</span>    
    <span class="square">23</span>    
    <span class="square">24</span>    
    <span class="square">25</span>    
    <span class="square">26</span>    
    <span class="square">27</span>    
    <span class="square">28</span>    
    <span class="square">29</span>    
    <span class="square">30</span>    
    <span class="square">*</span>    
</div>

CSS

#container {
    width: 500px;
    height: 500px;
}
span { 
    border: 2px solid blue;
    background-color: lightgrey;
    width: 50px; line-height:50px;
    display: inline-block;
    text-align:center;
    vertical-align: middle;
    font-weight: bold;
    margin: 4px;
}
#container span.square {float: left;}
#current span.square { border: 2px dotted blue; width: 150px; line-height:150px; font-size: 2.5em; float: left; }

JavaScript

$("#add").on("click", function(){
    $("#history").append($("#current span")[0]);
    $("#current").append($("#contents span")[0]);
});

(function($){
 
    $.fn.shuffle = function() {
 
        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
           });
 
        this.each(function(i){
            $(this).replaceWith($(shuffled[i]));
        });
 
        return $(shuffled);
 
    };
 
})(jQuery);
$("#contents span").shuffle();