Generatore di password in Javascript!

Samueleex

In questa discussione vedremo com'è strutturato un generatore di password in Javascript, utile esercizio per fare pratica con vettori, cicli e alert.
Iniziamo a definire le variabili che andremo ad usare generateBtn, lowercaseChars, uppercaseChars, numberChars, specialChars, e password.
generateBtn è il riferimento all'elemento che sta sull'HTML con l'ID "generate" cioè il pulsante.
lowercaseChars, uppercaseChars, numberChars, e specialChars contengono i caratteri che possono essere utilizzati nella password.
Definiamo la funzione generateSinglePassword che prende i parametri le info della password che fornisce l'utente tramite gli alert, quinid lunghezza della password e quattro booleani (true o false): minuscole, maiuscole, numeri e caratteri speciali nella password.
selectedChars tiene conto della lunghezza scelta dall'utente.
Viene poi generata la password vera e propria in base alla lunghezza specificata e selezionando caratteri casuali da selectedChars e infine viene resitutita.
La funzione principale è generatePassword perché gestisce tutta la logica per la generazione della password.
Verifica se l'utente ha effettuato almeno una scelta (altrimenti restituisce un messaggio di errore) e si chiede all'utente quante password vuole generare.
Per generare il numero di password specificate dall'utente si ripete generateSinglePassword con un for.
Alla fine le password vengono generate nell'elemento HTML con ID "password".
La riga finale "collega" il pulsante con ID "generate" alla funzione generatePassword in modo che quando viene cliccato il pulsante la funzione generatePassword viene eseguita per generare le password.

LINK GITHUB

LINK TOOL

Codice:

Javascript:

// vettori con i caratteri che verranno usati
var generateBtn=document.querySelector("#generate");
var lowercaseChars="abcdefghijklnopqrstuvwxyz";
var uppercaseChars="ABCDEFGHIJKLONPQURSTUVWXYZ";
var numberChars="1234567890";
var specialChars="=+!@#$%^&*()[]";
var password="";

// info psw
function generateSinglePassword(length, lowerCase, upperCase, numbers, special) {
    var selectedChars="";

    // scelte
    if (lowerCase){
        selectedChars+=lowercaseChars;
    }
    if (upperCase){
        selectedChars+=uppercaseChars;
    }
    if (numbers){
        selectedChars+=numberChars;
    }
    if (special){
        selectedChars+=specialChars;
    }

    // vero e proprio psw gen
    var generatedPassword="";
    for (var i=0; i<length; i++) {
        generatedPassword += selectedChars.charAt(Math.floor(Math.random() * selectedChars.length));
    }

    return generatedPassword;
}

// funzione gen
function generatePassword() {
    // info per la generazione
    var passwordLength=prompt("Quanto lunga deve essere la password? Minimo 8 caratteri e massimo 128 caratteri.");
    if (passwordLength<8 || passwordLength>128 || isNaN(passwordLength)) {
        alert("La lunghezza deve essere compresa tra 8 e 128 caratteri.");
        return;
    }

    var lowerCase=confirm("Minuscole?");
    var upperCase=confirm("Maiuscole?");
    var numbers=confirm("Numeri?");
    var special=confirm("Caratteri speciali?");

    // almeno una scelta!!!
    if (!(lowerCase || upperCase || numbers || special)) {
        alert("Almeno una scelta! Stai programmando in Whitespace??");
        return;
    }

    // alert num psw
    var numberOfPasswords = prompt("Quante password vuoi generare?");
    if (numberOfPasswords===null || isNaN(numberOfPasswords) || numberOfPasswords<1) {
        alert("Inserisci un numero valido di password da generare.");
        return;
    }

    var generatedPasswords="";
    // ciclo per generare il numero di password
    for (var j=0; j<numberOfPasswords; j++) {
        generatedPasswords += generateSinglePassword(passwordLength, lowerCase, upperCase, numbers, special)+"\n";
    }

    // restituisci psw generate
    var passwordText=document.querySelector("#password");
    passwordText.textContent = generatedPasswords;
}

// indice per il tasto genera
generateBtn.addEventListener("click", generatePassword);

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Generatore di password</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1>PSWGEN!</h1>
      </header>
      <div class="card">
        <div class="card-header">
          <h2>Inizia a generare!</h2>
        </div>
        <div class="card-body">
          <textarea
            readonly
            id="password" 
            placeholder="Campo del risultato"
            aria-label="PSW GENERATA"
          ></textarea> 
          <!-- where generatePassword displays on the -->
        </div>
        <div class="card-footer">
          <!-- line 2 of js -->
          <button id="generate" class="btn">Genera password!</button> 
        </div>
      </div>
    </div>
    <script src="./script.js"></script>
  <credit>
    <h4>by Samueleex</h4>
  </credit>
  </body>
</html>

CSS:

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 2%;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  background-color: #f0f2f5;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

header {
  text-align: center;
  padding: 20px;
  color: #333;
}

.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  color: #333;
  font-size: 18px;
  margin-bottom: 30px;
  padding: 30px;
}

.card-header::after,
.card-footer::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #ccc;
  margin: 20px 0;
}

.card-body {
  min-height: 100px;
}

.card-footer::after {
  content: "";
  display: table;
  clear: both;
}

.btn {
  border: none;
  background-color: #ff7300;
  border-radius: 25px;
  box-shadow: 0 2px 4px rgb(255, 115, 0, 0.2);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  margin: 16px 0;
  padding: 12px 24px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #b35f00;
}

button[disabled] {
  cursor: not-allowed;
  background: #ccc;
}

.float-right {
  float: right;
}

#password {
  border: 2px dashed #ccc;
  border-radius: 6px;
  padding: 15px;
  font-size: 16px;
  width: 100%;
  min-height: 100px;
  max-height: 300px;
  overflow-y: auto;
  text-align: center;
}

credit {
  text-align: center;
  padding: 20px;
  color: #333;
}


@media (max-width: 690px) {
  .btn,
  #password {
    font-size: 16px;
  }
}

@media (max-width: 500px) {
  .btn,
  #password {
    font-size: 14px;
  }
}

Fondatori