JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<div id="board" class="container">
    <div class="col">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="col">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="col">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="col">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="col">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>
<div id="controls" class="container">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col">
        <button id="roll">SPIN!</button>
    </div>
</div>

CSS

.container {
    width: 500px;
    display: table;
    height: 400px;
    border-collapse: collapse;
}

.col {
    width: 20%;
    border: solid 1px #000;
    height: 400px;
    display: table-cell;
    margin: 0px;
    border-collapse: collapse;
}

.item {
    height: 25%;
    border: solid 1px #000;
    width: 100%;
    text-align: center;
    padding-top: 40%;
}

#controls {
    margin-top: 10px;
    height: 50px;
}

#controls .col {
    height: 50px;
}

#controls .col button {
    width: 100%;
    height: 50px;
}

JavaScript

var sm = function() {

    var items = [{
        face: "J",
        value: 1
    }, {
        face: "Q",
        value: 2
    }, {
        face: "K",
        value: 3
    }, {
        face: "A",
        value: 4
    }, {
        face: "WILD",
        value: 5
    }];

    this.init = function() {

    };

    this.roll = function() {
        $('#board .col .item').each(function() {
            var item = items[Math.floor(Math.random() * items.length)];
            $(this).text(item.face);
        });
    };

};

var mac = new sm();
mac.roll();
$('#roll').click(function(){
    mac.roll();
});