0

[ALETORIZADOR DE GRUPOS]

En el código que se encuentra en el enlace que dejaré abajo se encuentra el siguiente programa:

En este podrás especificar primeramente el numero de grupos y seguidamente el número de personas por grupo:

Al indicar los grupos y personas por grupo y hacer click en el botón aparecerá un alert en el cual podremos indicar los nombres separados por comas:

Al imprimir los nombres que contiene el array me aparece la coma final por la que he hecho .split(',') [Recuadro Verde],y tengo que crear un grupo aparte para las personas que sobran de esa lista [Recuadro Rojo y Recuadro Resultado Morado] pero me esta dando problemas.

RECURSO: Código en JSFiddle

Gracias por su tiempo y su ayuda.

7
  • Podrías compartir el array y lo que has intentado, por favor
    – Samsepi
    Commented el 12 dic. 2020 a las 15:23
  • @Samsepi esta en el código del enlace que pasé, gracias por mostrar interés! Commented el 12 dic. 2020 a las 15:26
  • sólo quieres quitar esa última ','? Commented el 12 dic. 2020 a las 15:46
  • 1
    @L.Ronquillo sí, y añadir una función para que me guarden los nombres del array que sobren en una tabla excluidos, gracias! Commented el 12 dic. 2020 a las 15:51
  • Añado fotos, para explicarlo Commented el 12 dic. 2020 a las 15:54

1 respuesta 1

1

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>

1
  • la cosa es que requiero de la tabla excluidos, con ello el usuario podra poner todos los nombres que quiera. Commented el 12 dic. 2020 a las 19:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.