Hide & Show Password

HuXn-WebDev · HuXn-WebDev · commit 7a03e2752a0b · 2022-07-05T12:32:10.000-07:00
diff --git a/28. Show Hide Password/app.js b/28. Show Hide Password/app.js
@@ -0,0 +1,13 @@
+const input = document.querySelector("input");
+const eye = document.querySelector("#eye-icon");
+
+eye.addEventListener("click", () => {
+  //   if (input.type === "password") {
+  //     input.type = "text";
+  //   } else {
+  //     input.type = "password";
+  //   }
+
+  // REFACTOR
+  input.type === "password" ? (input.type = "text") : (input.type = "password");
+});
diff --git a/28. Show Hide Password/index.html b/28. Show Hide Password/index.html
@@ -0,0 +1,26 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Show Hide Password</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
+      integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <input type="password" placeholder="Password" />
+      <div class="eye-container">
+        <i class="fa fa-eye" aria-hidden="true" id="eye-icon"></i>
+      </div>
+    </div>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/28. Show Hide Password/style.css b/28. Show Hide Password/style.css
@@ -0,0 +1,59 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: sans-serif;
+}
+
+body {
+  position: relative;
+  min-height: 100vh;
+  background-color: rgb(10, 10, 165);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.container {
+  position: relative;
+  width: 100%;
+  max-width: 400px;
+  background: #fff;
+  border-radius: 5px;
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
+}
+
+input {
+  outline: none;
+  background: none;
+  border: none;
+  width: 90%;
+  padding: 10px 20px;
+  font-size: 16px;
+}
+
+.eye-container {
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  transform: translateY(-50%);
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#eye-icon {
+  font-size: 20px;
+  color: #777;
+  transition: 0.2s ease;
+}
+
+#eye-icon:hover {
+  color: rgb(10, 10, 165);
+  cursor: pointer;
+}
