Wie kann ich den Inhalt eines Passwortfeld anzeigen und verstecken? (HTML, CSS und Javacsript)

Dieses Element sieht man auf vielen Webseiten, wo man ein Passwort eingeben muss, denn es hilft dem Webseitenbesucher sehr, und zwar geht es um das Passwortfeld, wo man das Passwort anzeigen oder verstecken kann. Auch mir hilft es immer wieder, wenn ich ein Passwort eingebe und es funktioniert nicht und ich mir sicher bin, dass ich alles korrekt eingegeben habe, nur um später dann zu entdecken: Ich habe eine Taste auf der Tastatur, die klemmt …

Genau heute zeige ich euch, wie man die Passwörter anzeigen und wieder verstecken kann.

Video

HTML

<div class="formular">
      <input type="password" id="password" placeholder="Passwort..." />
      <img src="auge-zu.png" alt="auge-zu" id="icon" />
    </div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #250057;
}

.formular {
  background: #fff;
  width: 90%;
  max-width: 500px;
  border-radius: 5px;
  padding: 10px 20px;
  margin: 300px auto;

  display: flex;
  align-items: center;
}

.formular input {
  width: 100%;
  padding: 10px 0;
  border: 0;
  outline: 0;
  font-size: 24px;
  color: #555;
}

.formular img {
  width: 35px;
  cursor: pointer;
}

Javascript

let password = document.getElementById("password");
let icon = document.getElementById("icon");


icon.onclick = () => {
    if(password.type == "password"){
        password.type = "text"
        icon.src  = "auge-offen.png";
    }
    else {
        password.type = "password"
        icon.src  = "auge-zu.png";
    }
}