Esta parte:
let innerText = "<br><h4 class='todos-nombres'> TODOS LOS NOMBRES </h4><br>";
for (let i = 0; i < nuevoArray.length; i++) {
innerText += nuevoArray[i] + ",";
}
innerText += "<br>" + "<br>" + "\n";
Se puede reemplazar con:
let innerText = `
<br /><h4 class="todos-nombres">TODOS LOS NOMBRES</h4><br />
${nuevoArray.join(', ')}
<br /><br />
`;
Así desaparecerá esa coma al final.
Bonus
Tienes que acostumbrarte ahora que estás empezando a escribir código limpio, entendible, manejable. Prefiere siempre un código modular frente a una sola función enorme que haga todo. Lee sobre principios SOLID.
Así podría verse tu código modularizando:
function printPeople(people) {
const output = document.getElementById('personas');
output.innerHTML = `
<br><h4 class='todos-nombres'> PERSONAS </h4><br>
<code>${people.join(', ')}</code>
<br />
`;
}
function printGroups(groups) {
const output = document.getElementById('gruposFinales');
output.innerHTML = `
<br><h4 class='todos-nombres'> GRUPOS </h4><br>
${
groups.map(group => (`
<table>
<thead>
<tr><th>Personas</th></tr>
</thead>
<tbody>
<tr>
<td>
${
group.map(person => `<p>${person}</p>`)
}
</td>
</tr>
</tbody>
</table>
`))
}
<br /><br />
`.replace(/,/g, '');
}
function suffleList(array) {
const clone = [...array];
for (let i = clone.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
let temp = clone[i];
clone[i] = clone[j];
clone[j] = temp;
}
return clone;
}
/* Utilitary of @sospedra - https://stackoverflow.com/a/29645164/10670707 */
const chunk = (target, size) => {
return target.reduce((memo, value, index) => {
if (index % (target.length / size) == 0 && index !== 0) memo.push([])
memo[memo.length - 1].push(value)
return memo
}, [[]])
}
function Grupos() {
const names = prompt("Nombres: ").split(",");
let peoplePerGroup = Number.parseInt(
document.getElementById("personasDelGrupo").value,
10
);
const randomizedPeople = suffleList(names);
const groups = chunk(randomizedPeople, names.length / peoplePerGroup);
printPeople(names);
printGroups(groups);
}
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap');
* {
font-family: 'Roboto Condensed', sans-serif;
margin : 0;
padding : 0;
}
.title {
padding-top: 66px;
font-family : 'Roboto Condensed', sans-serif;
text-align : center;
line-height : 40px;
color : rgb(0, 0, 0);
font-weight : 200;
text-transform: uppercase;
}
h5{
font-size: medium;
}
table{
padding: 20px;
border: 1px solid #ccc;
display: inline-table;
border-radius: 8px;
}
table th {
font-weight: bolder;
}
code {
padding: 10px;
border-radius: 8px;
background: #eee;
}
#grupos{
text-align: center;
font-size: medium;
padding: 10px;
outline:none;
border: 0;
border: 1px solid #011627;
}
#grupos::placeholder{
outline:none;
border: 0;
text-align: center;
}
#grupos:hover{
border: 1px solid #011627;
box-shadow: 0 0 3px 2px #011627;
}
#personasDelGrupo{
text-align: center;
font-size: medium;
padding: 10px;
outline:none;
border: 0;
border: 1px solid #011627;
}
#personasDelGrupo::placeholder{
outline:none;
border: 0;
text-align: center;
}
#personasDelGrupo:hover{
border: 1px solid #011627;
box-shadow: 0 0 3px 2px #011627;
}
.boton{
border: 2px #fff;
color:white;
background: #011627;
margin: 5px;
padding: 5px;
outline:none;
box-shadow: 0 0 3px 2px #011627;
}
.boton:hover{
transition: 0.7s;
background-color: #fff;
color : #191919;
border: 1px solid #011627;
}
.posicion {
padding-top: 33px;
display : table;
height : 100%;
margin : 0 auto;
}
.tablas{
padding: 20px;
margin: 20px 10px;
border: 1px solid;
}
.el-contenedor {
display : table-cell;
vertical-align: middle;
text-align: center;
}
<h1 class="title"> GROUP RANDOMIZER </h1>
<div class="posicion">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="el-contenedor">
<input id="personasDelGrupo" placeholder="Personas por grupo">
<br><br>
<input type="button" value="Crear Grupos" class="boton" onclick="Grupos()">
<br>
<div id="personas"></div>
<div id="gruposFinales"></div>
</div>
</div>
</div>
</div>
</div>