Team Pick

by Chan Wu

HTML

<button id="btn">分組</button>
<h3>候選名單</h3>
<div class="candidate"> </div>
<h3>分組結果</h3>
<div class="result"> </div>

CSS

div {
    margin: 4px 0;
}

Babel + JSX

let names = [
    '老瑜',
    '小鄒',
    'Marco',
    'Max',
    '崇文',
    '憲民',
    '罐頭',
    '阿傑',
    '小陳',
    '強強',
    '阿哲',
    'Ash',
];
let mod = 3;
let teamPick = function() {
    let html = '<div>';
    shuffle(names);
    names.forEach((item, index) => {
        html += item + ' ';

        if ((index + 1) % mod === 0) {
            html += '</div><div>';
        }
    });

    $('.result').html(html);
}

$('.candidate').html(names.join(', '));
$('#btn').on('click', teamPick);

function shuffle(a) {
    var j, x, i;
    for (i = a.length; i; i -= 1) {
        j = Math.floor(Math.random() * i);
        x = a[i - 1];
        a[i - 1] = a[j];
        a[j] = x;
    }
}