Esercizi 05/03/2024 es4 by @AurelianoDC - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<input>Definisce un area di input per l'invio di dati e informazioni
formnovalidateImpedisce la convalida di un singolo elemento input
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
classDefinisce una o più classi per elemento
getDefinisce un metodo di invio di dati al server
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>

Users

Log in to search for users

Explore

Find inspiration

Curriculum html

Corrispondenza tra stringhe

lezione 31.10 1

Esercitazione WD

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generatore di Password</title>
<!-- Collegamento a Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <h1 class="text-center mb-4">Generatore di Password</h1>
      <p class="text-center">Inserisci la lunghezza desiderata della password nel campo sottostante e premi il pulsante "Genera Password" per ottenere una password casuale di quella lunghezza. Premi "Cancella" per rimuovere tutte le password generate.</p>
      <form id="generaPasswordForm" class="d-flex justify-content-center align-items-center mb-3">
        <label for="lunghezza" class="mr-2 mb-0">Lunghezza:</label>
        <div class="form-group mr-2 mb-0">
          <input type="number" class="form-control" id="lunghezza" name="lunghezza" min="1" step="1">
        </div>
        <button type="submit" class="btn btn-primary mr-2">Genera Password</button>
        <button type="button" class="btn btn-danger" id="cancellaPassword">Cancella</button>
      </form>

      <ul id="passwordList" class="list-group mt-3"></ul>
    </div>
  </div>
</div>

<!-- Collegamento a jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Collegamento a script.js -->
<script src="script.js"></script>

</body>
</html>

$(document).ready(function() {
  // Ascoltatore per l'evento submit sul modulo
  $("#generaPasswordForm").submit(function(event) {
    // Previeni il comportamento predefinito del modulo (invio)
    event.preventDefault();

    // Ottieni la lunghezza desiderata della password inserita dall'utente
    let lunghezza = parseInt($("#lunghezza").val());

    // Genera la password casuale
    let passwordCasuale = generaPassword(lunghezza);

    // Aggiungi la password alla lista
    $("#passwordList").append("<li class='list-group-item'>" + passwordCasuale + "</li>");
  });

  // Ascoltatore per il click sul bottone "Cancella"
  $("#cancellaPassword").click(function() {
    // Rimuovi tutte le password dalla lista
    $("#passwordList").empty();
  });
});

// Funzione per generare una password casuale
function generaPassword(lunghezza) {
  const caratteriAmmissibili = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+{}[]|;:,.<>?";
  //const caratteriAmmissibili = /[a-zA-Z0-9!@#$%^&*()_+{}[\]|;:,.<>?]/;
  //versione regex
  let password = "";
  for (let i = 0; i < lunghezza; i++) {
    let indice = Math.floor(Math.random() * caratteriAmmissibili.length);
    password += caratteriAmmissibili.charAt(indice);
  }
  return password;
}