Hide/Show Password

[x32x01]

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

<div class="pass">
 
  <label for="password">password</label>

  <input type="password" name="password" id="password" required>

  <i class="far fa-eye" id="togglePassword"></i>
 
</div>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10% auto;
  font-size: 1.3rem;
}

.pass input {
  margin-top: 10px;
  width: 20rem;
  padding: 0.7rem;
  border-radius: 5px;
  box-shadow: 1px 1px 4px #00000040;
  border: none;
  font-size: 1.2rem;
  transition: all 0.3s ease-in-out;
}

.pass input:focus {
  outline: none;
  border: none;
  box-shadow: 1px 1px 4px #83c5be;
}

#togglePassword {
  margin-left: -35px;
  cursor: pointer;
  font-size: 1rem;
  color: #555;
}

#togglePassword:hover {
  color: #000;
}

const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#password');
 
togglePassword.addEventListener('click', function (e) {
    // toggle the type attribute
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    // toggle the eye slash icon
    this.classList.toggle('fa-eye-slash');
});