Generatore Password Complesse

Traccia

Come da titolo, oggi dobbiamo creare un generatore di password complesse. Per fare ciò dovete creare nell’HTML un input numero per definire la lunghezza della password. In aggiunta dovete dare la possibilità all’utente di scegliere se la password deve contenere caratteri minuscoli, maiuscoli, numeri e speciali (in modo separato).

Limitatevi ad un banale bottone per generare la password, a meno che vogliate fare le cose in tempo reale con le scelte dell’utente.

Soluzione

Pagina HTML

<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Generatore Password Complesse</h1>
    <div>
      <label for="lunghezza">Lunghezza</label>
      <input type="number" id="lunghezza" min="5" max="20" value="10" />
    </div>
    <div>
      <label for="caratteri-minuscoli">Caratteri Minuscoli</label>
      <input type="checkbox" id="caratteri-minuscoli" checked />
    </div>
    <div>
      <label for="caratteri-maiuscoli">Caratteri Maiuscoli</label>
      <input type="checkbox" id="caratteri-maiuscoli" checked />
    </div>
    <div>
      <label for="caratteri-numerici">Caratteri Numerici</label>
      <input type="checkbox" id="caratteri-numerici" checked />
    </div>
    <div>
      <label for="caratteri-speciali">Caratteri Speciali</label>
      <input type="checkbox" id="caratteri-speciali" checked />
    </div>
    <button id="genera-btn">Genera Password</button>
    <div id="risultato"></div>
    <script src="script.js"></script>
  </body>
</html>

Pagina Script.js

Elementi del form e liste di caratteri.

const lunghezzaPassword = document.getElementById("lunghezza");
const caratteriMinuscoli = document.getElementById("caratteri-minuscoli");
const caratteriMaiuscoli = document.getElementById("caratteri-maiuscoli");
const caratteriNumerici = document.getElementById("caratteri-numerici");
const caratteriSpeciali = document.getElementById("caratteri-speciali");
const generaBtn = document.getElementById("genera-btn");
const risultatoDiv = document.getElementById("risultato");

const listaCaratteriMinuscoli = "abcdefghijklmnopqrstuvwxyz";
const listaCaratteriMaiuscoli = "ABCDEFGHIJKLMNOPQRSTUVWXY";
const listaCaratteriNumerici = "0123456789";
const listaCaratteriSpeciali = "!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~)";

generaBtn.addEventListener("click", generaPassword);

Funzione genera password.

function generaPassword() {
  let stringaIniziale = "";
  let risultato = "";
  if (caratteriMinuscoli.checked) stringaIniziale += listaCaratteriMinuscoli;
  if (caratteriMaiuscoli.checked) stringaIniziale += listaCaratteriMaiuscoli;
  if (caratteriNumerici.checked) stringaIniziale += listaCaratteriNumerici;
  if (caratteriSpeciali.checked) stringaIniziale += listaCaratteriSpeciali;

  for (let i = 0; i < lunghezzaPassword.value; i++) {
    risultato += stringaIniziale.charAt(
      Math.floor(Math.random() * stringaIniziale.length)
    );
  }

  risultatoDiv.innerHTML = "";
  risultatoDiv.innerHTML = risultato;
}