📝 Updated input behavior

hicodersofficial · hicodersofficial · commit d49308ef55d8 · 2022-06-28T11:56:05.000+05:30
diff --git a/password-input/index.html b/password-input/index.html
@@ -4,18 +4,15 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
-    />
     <link rel="stylesheet" href="style.css" />
     <title>Input Password</title>
   </head>
   <body>
     <div class="input-container">
       <div class="input-group">
         <input type="password" placeholder="Enter your password" />
-        <i class="fa-solid fa-eye-slash"></i>
+        <span class="toggle">☠️</span>
+        <span class="ripple"></span>
       </div>
       <div class="pass-strength">
         <div class="strength-percent"><span></span></div>
diff --git a/password-input/main.js b/password-input/main.js
@@ -1,5 +1,6 @@
 const passInput = document.querySelector(".input-group input");
-const toggleIcon = document.querySelector(".input-group i");
+const toggleIcon = document.querySelector(".input-group .toggle");
+const ripple = document.querySelector(".input-group .ripple");
 const percentBar = document.querySelector(".strength-percent span");
 const passLabel = document.querySelector(".strength-label");
 
@@ -35,11 +36,29 @@ function togglePassInput(e) {
   const type = passInput.getAttribute("type");
   if (type === "password") {
     passInput.setAttribute("type", "text");
-    toggleIcon.classList.remove("fa-eye-slash");
-    toggleIcon.classList.add("fa-eye");
+    toggleIcon.innerHTML = "💀";
+    ripple.style.cssText = `
+    border-radius: 4px;
+    width: 100%;
+    height: 100%;
+    right: 0;
+    z-index: -1;
+    `;
+    passInput.style.color = "#000";
+    passInput.style.background = "transparent";
+    toggleIcon.style.fontSize = "27px";
   } else {
     passInput.setAttribute("type", "password");
-    toggleIcon.classList.remove("fa-eye");
-    toggleIcon.classList.add("fa-eye-slash");
+    toggleIcon.innerHTML = "☠️";
+    toggleIcon.style.fontSize = "25px";
+    ripple.style.cssText = `
+    border-radius: 50%;
+    height: 35px;
+    width: 35px;
+    right: 10px;
+     z-index: 1;
+    `;
+    passInput.style.color = "#fff";
+    passInput.style.background = "#112d37";
   }
 }
diff --git a/password-input/style.css b/password-input/style.css
@@ -30,7 +30,7 @@ body {
   border: 1px solid #215164;
   border-radius: 4px;
   color: #fff;
-  transition: all 0.2s;
+  transition: width 0.9s, height 0.9s, border-radius 0.9s;
   font-size: 16px;
 }
 
@@ -42,10 +42,25 @@ body {
   border: 1px solid #55b7dd;
   box-shadow: 0px 0px 2px 2px #55b7dd34;
 }
-.input-group i {
+.input-group .toggle {
   position: absolute;
   right: 10px;
+  font-size: 25px;
   cursor: pointer;
+  user-select: none;
+  z-index: 99;
+}
+
+.input-group .ripple {
+  background: #fff;
+  display: block;
+  position: absolute;
+  height: 35px;
+  width: 35px;
+  border-radius: 50%;
+  right: 10px;
+  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
+  z-index: 1;
 }
 
 .pass-strength {
