Toggle Password Visibility

PHOTO EMBED

Fri Mar 18 2022 07:47:30 GMT+0000 (UTC)

Saved by @Kristi #javascript

//HTML
<div class="form__block">
     <label for="customer-password">Password</label>
     <div class="form__input">
        <input type="password"
               name="customer-password"
               id="customer-password"
               min="6"/>
      </div>
      <div class="customer-password-icon">
         <i aria-label="click to show password" class="fa-solid fa-eye"></i>
         <i aria-label="click to hide password" class="fa-solid fa-eye-slash"></i>
 	  </div>
</div>



//Show hide Password
const togglePassword = () => {
  const passwordInput = document.getElementById('customer-password');
  const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
  passwordInput.setAttribute('type', type);

  if (type === 'text') {
    eyeIcon.style.display = 'block';
    eyeHideIcon.style.display = 'none';
  } else {
    eyeIcon.style.display = 'none';
    eyeHideIcon.style.display = 'block';
  }
};
content_copyCOPY

https://www.javascripttutorial.net/javascript-dom/javascript-toggle-password-visibility/