1

He creado un password generator App. Y como veran a continuacion en el codigo, dentro de la funcion, repito cuatro veces el mismo procedimiento, para poder generar 4 contraseñas haciendo un solo click, y guardando las mismas en 4 variables distiantas, las cuales van a ser impresas en 4 inputs.

Mi objetivo es no repetir el codigo esta cantidad de veces, hacerlo mas conciso y ajustarlo a las buenas practicas.

Obviamente se me ha ocurrido usar un loop, pero no logro entender como crear 4 variables distintas ( Si es que realmente necesito crearlas, para poder luego hacer el display de las contraseñas en el input.)

const letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
const numbers = "0123456789";
const symbols = "!@#$%^&*_-+=";


const button = document.querySelector(".gen-pass");

const input1 = document.querySelector(".first-password")
const input2 = document.querySelector(".second-password")
const input3 = document.querySelector(".third-password")
const input4 = document.querySelector(".fourth-password")

button.addEventListener("click", (e) => {
 e.preventDefault();

  const password = Array(4).fill(0).flatMap(() => 
  [
      letters[Math.floor(Math.random() * letters.length)],
      numbers[Math.floor(Math.random() * numbers.length)],
      symbols[Math.floor(Math.random() * symbols.length)]
    ]
  ).join('');

  const password2 = Array(4).fill(0).flatMap(() => 
    [
      letters[Math.floor(Math.random() * letters.length)],
      numbers[Math.floor(Math.random() * numbers.length)],
      symbols[Math.floor(Math.random() * symbols.length)]
    ]
  ).join('');

  const password3 = Array(4).fill(0).flatMap(() => 
    [
      letters[Math.floor(Math.random() * letters.length)],
      numbers[Math.floor(Math.random() * numbers.length)],
      symbols[Math.floor(Math.random() * symbols.length)]
    ]
  ).join('');

  const password4 = Array(4).fill(0).flatMap(() => 
    [
      letters[Math.floor(Math.random() * letters.length)],
      numbers[Math.floor(Math.random() * numbers.length)],
      symbols[Math.floor(Math.random() * symbols.length)]
    ]
  ).join('');

    input1.value = password;        
    input2.value = password2;        
    input3.value = password3;        
    input4.value = password4;        
    
})

1
  • 2
    Un método que haga esto mismo y retorne el string. Cada vez que lo llames debería entregar un string diferente :)
    – Alfabravo
    Commented el 9 may. 2022 a las 21:30

1 respuesta 1

1

Como lo indica un comentario, la mejor forma de evitar la repeticion seria creando una funcion con la logica que necesitas. Algo asi:

const letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
const numbers = "0123456789";
const symbols = "!@#$%^&*_-+=";

const password = function() {
  return Array(4).fill(0).flatMap(() => 
  [
      letters[Math.floor(Math.random() * letters.length)],
      numbers[Math.floor(Math.random() * numbers.length)],
      symbols[Math.floor(Math.random() * symbols.length)]
    ]
  ).join('');
}


const button = document.querySelector(".gen-pass");

const input1 = document.querySelector(".first-password")
const input2 = document.querySelector(".second-password")
const input3 = document.querySelector(".third-password")
const input4 = document.querySelector(".fourth-password")

button.addEventListener("click", (e) => {
    e.preventDefault();
 
    input1.value = password();        
    input2.value = password();         
    input3.value = password();       
    input4.value = password();         
    
})
<input class="first-password" >
<input class="second-password" >
<input class="third-password" >
<input class="fourth-password" >
<button class="gen-pass" >gen</button>

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.