Random teams

by Marc Malignan

HTML

<div id="result"></div>
<button id="generate">GENERATE</button>

CSS

body {
  background: #222;
  color: #eee;
  text-align: center;
}

#result {
  display: flex;
  width: 100%;
}

#result > ul {
  flex-grow: 1;
  flex-basis: 0;
  text-align: left;
}

JavaScript

const USERS = [
  'FĂ©licien',
  'Anne',
  'Laurent',
  'Maryna',
  'Nicolas B',
  'Emna',
  'Marion',
  'Thibault L',
  'Lau',
  'Vicouille',
  'Flo',
  'Nicoa',
  'Florent',
  'Marc',
];

const nbTeams = 3;

const rand = (min, max) => 
	Math.floor(Math.random() * (max - min + 1) + min);

const generate = () => {
	const users = [...USERS];
	const teams = Array.from(Array(4), () => []);
  const nbPerTeam = Math.ceil(users.length / nbTeams);
  
  teams.forEach(team => {
  	for (let i=0; i<nbPerTeam; i++) {
      if (users.length) {
				const index = rand(0, users.length - 1);
        const itemsToAdd = users.splice(index, 1);
      	team.push(itemsToAdd[0]);
      }
    }
  });
  
  return teams;
}

const draw = teams => {
	const result = document.getElementById('result');
  result.innerHTML = '';
	teams.forEach(team => {
  	const list = document.createElement('ul');
    team.forEach(user => {
    	const item = document.createElement('li');
      item.innerHTML = user;
      list.append(item);
    });
  	result.append(list);
  });
}

document
	.getElementById('generate')
  .addEventListener('click', () => {
  	const teams = generate();
    draw(teams);
  });