Lasst uns ein Passwort Generator mit HTML und Javascript programmieren

Heute programmieren wir mal wieder was sehr nützliches und zwar einen Passwort Generator. Wir brauchen immer wieder Passwörter und mit dieser Webseite könnt ihr jederzeit ein neues Passwort generieren lassen – ihr könnt hier auch gleich selbst einstellen wie lange das Passwort sein soll und welche Zeichen es enthalten soll. Ihr könnt also euer Passwort echt 100% selbst gestalten

Video

HTML

<div class="container">
      <h2>Passwort <span>Generator</span></h2>
      <input
        type="text"
        id="passwort"
        placeholder="Erstelle Password"
        readonly
      />
      <button id="btn" onclick="generatePasswort()">Passwort generieren</button>
    </div>

CSS

.container {
  position: inherit;
  width: 500px;
  border: 1px solid #000;
  text-align: center;
  padding: 15px;
  background-color: #fed9b7;
}

.container h2 {
  color: #00afb9;
}

.container span {
  color: #f07167;
  text-shadow: 1px 1px #000;
}

::placeholder {
  color: #000;
}

.container input {
  position: relative;
  width: 100%;
  height: 50px;
  border: none;
  margin: 15px 0 10px;
  text-align: center;
  font-size: 20px;
  letter-spacing: 4px;
  border-radius: 10px;
  box-sizing: border-box;
  background: #ede0d4;
}

button {
  position: relative;
  background-color: #0081a7;
  color: #fdfcdc;
  font-size: 1.2rem;
  padding: 10px 15px;
  border-radius: 5px;
}

button:active {
  transform: scale(0.95);
}

Javascript

function generatePasswort() {
  const chars =
    "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ.-!#?()+_";

  let passwortLaenge = 10;
  let passwort = "";

  for (let i = 0; i < passwortLaenge; i++) {
    let zufallsZahl = Math.floor(Math.random() * chars.length);
    /* console.log(zufallsZahl); */

    passwort += chars.substring(zufallsZahl, zufallsZahl + 1);
    /*console.log(passwort); */
  }
  document.getElementById("passwort").value = passwort;
}