Show Hide PASSWORD Update

Author: BhalliBhai

28. Show Hide Password/app.js

@@ -1,6 +1,15 @@
 const input = document.querySelector("input");
-const eye = document.querySelector("#eye-icon");
+const eyeOpen = document.querySelector(".eye-open");
+const eyeClose = document.querySelector(".eye-close");
 
-eye.addEventListener("click", () => {
-  input.type === "password" ? (input.type = "text") : (input.type = "password");
+eyeOpen.addEventListener("click", () => {
+  input.type = "text";
+  eyeOpen.style.display = "none";
+  eyeClose.style.display = "block";
+});
+
+eyeClose.addEventListener("click", () => {
+  input.type = "password";
+  eyeOpen.style.display = "block";
+  eyeClose.style.display = "none";
 });

28. Show Hide Password/index.html

@@ -18,7 +18,12 @@
       <input type="password" placeholder="Password" />
       <div class="eye-container">
         <svg width="30" height="30" class="eye-open" id="eye-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd" d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5ZM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5Zm-3-5c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3Z" clip-rule="evenodd"></path>
+          <path d="M15 11.64a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"></path>
+          <path d="M2.4 11.64S6 5.04 12 5.04s9.6 6.6 9.6 6.6-3.6 6.6-9.6 6.6-9.6-6.6-9.6-6.6Zm9.6 4.2a4.2 4.2 0 1 0 0-8.4 4.2 4.2 0 0 0 0 8.4Z"></path>
+        </svg>
+        <svg width="30" height="30" class="eye-close" id="eye-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="m15.348 17.47-1.936-1.938a4.2 4.2 0 0 1-5.37-5.369l-2.47-2.472C3.526 9.51 2.4 11.576 2.4 11.576s3.6 6.6 9.6 6.6a8.436 8.436 0 0 0 3.347-.706ZM8.652 5.681A8.434 8.434 0 0 1 12 4.976c6 0 9.6 6.6 9.6 6.6s-1.127 2.065-3.169 3.885l-2.474-2.474a4.199 4.199 0 0 0-5.37-5.369L8.653 5.681Z"></path>
+          <path d="M9.03 11.15a3 3 0 0 0 3.396 3.395L9.03 11.15Zm5.94.85-3.394-3.396a3 3 0 0 1 3.395 3.395Zm3.806 7.2L4.376 4.8l.85-.85 14.4 14.4-.85.85Z"></path>
         </svg>
       </div>
     </div>

28. Show Hide Password/style.css

@@ -57,3 +57,7 @@ input {
   color: rgb(10, 10, 165);
   cursor: pointer;
 }
+
+.eye-close {
+  display: none;
+}